Flutter 中的动画浮动操作按钮答案

【问题标题】：Animating Floating Action Button in FlutterFlutter 中的动画浮动操作按钮
【发布时间】：2021-06-06 14:33:00
【问题描述】：

我正在尝试添加一个动画，当用户向下滚动时，fab 将动画出来并消失，当向上滚动时，fab 再次出现。

这是我的代码：

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,
          ),
        ),
      ),

代码现在所做的是工厂正确隐藏，但它没有为不透明度设置动画，它只是在没有动画的情况下弹出和弹出，请帮助！

谢谢

【问题讨论】：

您可以简单地将Opacity 更改为AnimatedOpacity 并添加Duration 以动画化更改，更多信息。这里：api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html
@DarShan 但这并不能解决问题，它必须更多地与 OP 如何滚动事物有关。
OP 说：the fab is hiding properly, but it doesn't animate the opacity，因此该评论应该解决所问问题的问题。

标签： flutter dart

【解决方案1】：

尝试使用scrollnotification检测向下滚动（增加像素）和向上滚动（减少像素），向下滚动时，setState _fabVisible = 0，反之亦然：

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";
      });
    }

【讨论】：