如何在Flutter中实现浮动Snackbar的底部上浮动画？

Flutter 2.0及以上版本中，开启SnackBarBehavior.floating后，默认的入场/出场动画已经和Gmail滑动归档邮件时的Snackbar效果高度一致：默认从屏幕底部向上平移、同步淡入，停留结束后向下滑出淡出，使用的顺滑缓动曲线完全匹配移动端交互手感。

你当前代码里预留的animation参数属于高级自定义接口，没有配套的动画控制器的情况下手动传入反而会引发动画异常，直接删除即可，修正后的可运行代码如下：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text('Product removed from cart'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
        // 撤销逻辑
      },
    ),
    duration: const Duration(seconds: 3),
    behavior: SnackBarBehavior.floating,
    margin: const EdgeInsets.only(bottom: 30, left: 10, right: 10),
  ),
);

微调动画手感完全匹配Gmail #

如果觉得默认动画的缓动节奏和Gmail有细微差异，可以全局配置主题参数调整，不需要修改单个Snackbar的代码：
在MaterialApp的theme中添加snackBarTheme配置：

MaterialApp(
  theme: ThemeData(
    snackBarTheme: const SnackBarThemeData(
      // 动画时长和Gmail原生250ms保持一致
      animationDuration: Duration(milliseconds: 250),
      // 可按需调整背景、文字样式
      backgroundColor: Color(0xFF323232),
      contentTextStyle: TextStyle(color: Colors.white),
    ),
  ),
)

注意事项 #

• 如果使用的是Flutter 1.x版本，建议升级到2.0+，否则浮动Snackbar的默认动画逻辑和Gmail差异较大。
• SnackBar构造函数里的animation参数仅用于高级自定义场景，需要配合自己创建的AnimationController使用，普通业务场景不需要手动赋值。
• 不需要为了实现该效果自定义动画控制器，ScaffoldMessenger已经封装好了浮动Snackbar的完整动画逻辑。

内容的提问来源于stack exchange，提问作者Sheldon