Flutter 中的动画浮动操作按钮

Question

I'm trying to add in an animated where when the user scrolls down, the fab will animated out and disappear, and when scroll up, the fab reappear again.

Here is my code:

return Scaffold(
      floatingActionButton: AnimatedContainer(
        curve: Curves.easeIn,
        duration: const Duration(seconds: 1),
        child: Opacity(
          opacity: _fabVisible ? 1 : 0,
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(
              Icons.add,
              color: Colors.black,
            ),
            backgroundColor: Colors.white,
          ),
        ),
      ),

What the code is doing now is the fab is hiding properly, but it doesn't animate the opacity, it just pop in and out without animation, please help!

thank you

Answer 1

try to use scrollnotification for detecting scroll down (increase of pixels) and scroll up (decrease of pixels), when scroll down, setState _fabVisible = 0, vice versa:

Expanded(
            child: NotificationListener<ScrollNotification>(
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollStartNotification) {
                  _onStartScroll(scrollNotification.metrics);
                } else if (scrollNotification is ScrollUpdateNotification) {
                  _onUpdateScroll(scrollNotification.metrics);
                } else if (scrollNotification is ScrollEndNotification) {
                  _onEndScroll(scrollNotification.metrics);
                }
              },
              child: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  return ListTile(title: Text("Index : $index"));
                },
              ),
            ),
          ),

_onStartScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll Start";
      });
    }
_onUpdateScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll Update";
      });
    }
_onEndScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll End";
      });
    }