Flutter中如何为SnackBar自定义淡入淡出动画？

要实现时长300ms的自定义淡入淡出动画，你需要通过AnimationController和Animation对象控制SnackBar的显示/隐藏过渡，具体实现步骤如下：

1. 准备动画控制器与动画对象 #

在Widget的State类中定义动画控制器和透明度动画，同时混入SingleTickerProviderStateMixin提供动画同步支持：

class YourPageState extends State<YourPage> with SingleTickerProviderStateMixin {
  late AnimationController _snackBarAnimController;
  late Animation<double> _fadeAnimation;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置300ms时长
    _snackBarAnimController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    // 创建透明度过渡动画：从完全透明到不透明
    _fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: _snackBarAnimController,
        curve: Curves.easeInOut, // 可选曲线，让过渡更自然平滑
      ),
    );
  }

2. 绑定动画到SnackBar并控制播放 #

修改你的SnackBar代码，将animation参数绑定到自定义动画，同时在显示和关闭时控制动画的播放逻辑：

void showCustomSnackBar() {
  final SnackBar snackBar = SnackBar(
    backgroundColor: Colors.transparent,
    behavior: SnackBarBehavior.floating,
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
    margin: const EdgeInsets.only(bottom: 20.0),
    elevation: 0,
    duration: const Duration(seconds: 3),
    animation: _fadeAnimation, // 绑定自定义淡入淡出动画
    content: Container(
      width: 200,
      height: 60,
      color: Colors.red,
      child: const Text('Custom fadeIn/fadeOut animation',
          style: TextStyle(color: Colors.white)),
    ),
  );

  // 显示SnackBar，关闭时执行淡出动画并释放控制器
  scaffoldMessengerKey.currentState?.showSnackBar(snackBar).closed.then((_) {
    _snackBarAnimController.reverse().then((_) {
      _snackBarAnimController.dispose();
    });
  });

  // 启动淡入动画
  _snackBarAnimController.forward();
}

3. 关键注意点 #

• 动画结束后必须调用dispose()释放AnimationController，避免内存泄漏
• 如果需要重复显示SnackBar，建议复用控制器并重置动画状态，而非每次创建新实例
• 可根据需求替换CurvedAnimation的曲线参数，比如Curves.fastOutSlowIn调整动画节奏

内容的提问来源于stack exchange，提问作者Huu Bao Nguyen