如何在 flutter 中为 Snackbar 制作动画

Question

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Snackbar'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void showAnimatedSnackbar(BuildContext context) {
    final animationController = AnimationController(
      vsync: Scaffold.of(context),
      duration: Duration(milliseconds: 650),
    );

    final animation = Tween(begin: Offset(0.0, 1.0), end: Offset(0.0, 0.0))
        .animate(CurvedAnimation(
            parent: animationController, curve: Curves.decelerate));

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        padding: EdgeInsets.all(0.0),
        margin: EdgeInsets.all(0),
        behavior: SnackBarBehavior.floating,
        backgroundColor: Colors.transparent,
        elevation: 0,
  //        shape: RoundedRectangleBorder(
  //   borderRadius: BorderRadius.circular(12.0), // Customize the border radius
  // ), 
        content: SlideTransition(
          position: animation,
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: AspectRatio(
              aspectRatio: 8,
              child: Container(
                decoration: BoxDecoration(
                   color: Colors.black,
                  borderRadius: BorderRadius.circular(12.0), 
                ),
                // height: 70,
                // width: 200,
               
                child: Center(child: Text('This is an animated Snackbar!'))),
            ),
          ),
        ),
      ),
    );

    animationController.forward();
  }

  void callShowSnackbar(BuildContext context) {
    showAnimatedSnackbar(context);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              showAnimatedSnackbar(context);
            },
            child: Text('Show Animated Snackbar'),
          ),
          // ElevatedButton(
          //   onPressed: () {
          //     callShowSnackbar(context);
          //   },
          //   child: Text('Call from Another Function'),
          // ),
        ],
      ),
    );
  }
}

我想为这个“snackbar”制作动画。当“snackbar”消失时，您可以看到动画不起作用。当它消失时，我想要一个缓出或任何其他动画。小吃栏带有动画，有人能修复它吗？预先感谢.. （我想要像 Instagram 那样的小吃栏动画）

Answer 1

也许这些扩展可以解决您的问题；

https://pub.dev/packages/animated_snack_bar 或 https://pub.dev/packages/awesome_snackbar_content

即使它不符合您的期望，您仍然可以深入研究其源代码并使用必要的动画。