Flutter how to make FAB invisible when scrolling down and visible when scrolling up

Question

I have a floating action button at the right bottom of a SingleChildScrollView that I will like to disappear when scrolling down and appear when scrolling up like the attached gif file :

My code is below and will appear with any suggestion

final dataKey = new GlobalKey();

initState(){
 super.initState();
   
  _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener((){
      if(_hideButtonController.position.userScrollDirection == ScrollDirection.reverse){
        if(_isVisible == true) {
          /* only set when the previous state is false
             * Less widget rebuilds
             */
          print("**** ${_isVisible} up"); //Move IO away from setState
          setState((){
            _isVisible = false;
          });
        }
      } else {
        if(_hideButtonController.position.userScrollDirection == ScrollDirection.forward){
          if(_isVisible == false) {
            /* only set when the previous state is false
               * Less widget rebuilds
               */
            print("**** ${_isVisible} down"); //Move IO away from setState
            setState((){
              _isVisible = true;
            });
          }
        }
      }});
}

 floatingActionButton:  new Visibility(
            visible: _isVisible,
            child: new FloatingActionButton(backgroundColor: colorBlue,
            onPressed: () => Scrollable.ensureVisible(dataKey.currentContext,duration:  Duration(seconds: 1)),
          child: Icon(Icons.arrow_upward),)),
        

body:SingleChildScrollView(
      key: dataKey,
  physics: BouncingScrollPhysics(),
      controller: _hideButtonController,

)

As you can see that I have key: dataKey, that simply automatically scrolls to the top of the page when click you can see I tried using Visibility but it didn't work for me, and not sure what I did wrong but I will like the FAB to appear and disappear as shown in the attached GIF. Thanks in advance.

Does this answer your question? [Flutter - Hiding FloatingActionButton](https://stackoverflow.com/questions/45631350/flutter-hiding-floatingactionbutton) — Md. Yeasin Sheikh, Jul 25 '22 at 11:27
The above link you sent was what I tried but didn't work for me. — mideveloper, Jul 25 '22 at 13:41

score 1 · Answer 1 · answered Jul 25 '22 at 14:48

About the fab animation, you can use SlideTransition

Run on dartPad

class FabAnimation extends StatefulWidget {
  const FabAnimation({Key? key}) : super(key: key);

  @override
  State<FabAnimation> createState() => _FabAnimationState();
}

class _FabAnimationState extends State<FabAnimation>
    with SingleTickerProviderStateMixin {
  late ScrollController _hideButtonController;

  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 600),
    vsync: this,
  )
    ..addListener(() {
      setState(() {});
    })
    ..forward();//first time load
  late final Animation<Offset> _offsetAnimation = Tween<Offset>(
    end: Offset.zero,
    begin: const Offset(0, 2.0),
  ).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
  ));

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  initState() {
    super.initState();
    _hideButtonController = ScrollController();
    _hideButtonController.addListener(() {
      //add more logic for your case
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        if (_offsetAnimation.isCompleted) _controller.reverse();
      }
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.forward) {
        _controller.forward();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: SlideTransition(
          position: _offsetAnimation,
          child: FloatingActionButton(
            backgroundColor: Colors.blue,
            onPressed: () {},
            child: Icon(Icons.arrow_upward),
          )),
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        controller: _hideButtonController,
        child: Column(
          children: List.generate(
            33,
            (index) => ListTile(
              tileColor: index.isEven ? Colors.deepPurple : Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

Play with `Offset`, `curve` and `duration` – Md. Yeasin Sheikh Jul 25 '22 at 14:55 — Md. Yeasin Sheikh, Jul 25 '22 at 14:55

Flutter how to make FAB invisible when scrolling down and visible when scrolling up

1 Answers1