如何自定义淡入/淡出动画小吃吧在Flutter?

guz6ccqo  于 2023-01-27  发布在  Flutter
关注(0)|答案(1)|浏览(159)

我想在Flutter中自定义show/hideSnackBar(带动画)fadeIn/fadeOut
关于300 millisecondsfadeIn/fadeOut动画和时间

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: , //<- TODO: Animation for SnackBar
        content: Container(
            width: 200,
            height: 60,
            color: Colors.red,
            child: const Text('Custom fadeIn/fadeOut animation',
                style: TextStyle(color: Colors.white))));

    scaffoldMessengerKey.currentState?.showSnackBar(snackBar);

如何为SnackBar定制动画?

p8h8hvxi

p8h8hvxi1#

您可以使用controlleranimation来实现自定义snackbar。

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController controller;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 0),
      vsync: this,
    );
    animation = CurvedAnimation(parent: controller, curve: Curves.easeInOut)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        }
      });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

Snackbaranimation属性中添加animation,您甚至可以添加fadeTransition以使内容淡入和淡出。

ElevatedButton(
  onPressed: () {
    controller.forward();
    SnackBar(
      animation: animation,
      behavior: SnackBarBehavior.floating,
      margin: const EdgeInsets.all(16),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10)),
      content: FadeTransition(  // 👈 You can even add FadeTransition to the content
                opacity: controller, child: const Text("Content")),
                duration: const Duration(seconds: 3));
              },
     child: const Text(" Custom Snackbar ")),
   }
);

除此之外,您还可以使用another_flushbar

另请参阅How to implement floating Snackbar animation in flutter?

相关问题