如何在flutter中实现浮动Snackbar animation？

Question

我正在尝试在浮动 Snackbar 中实现 animation，它从屏幕底部出现并向上移动，就像 Gmail 应用程序中出现滑动邮件以获取目标的应用程序一样。 有人可以举个例子吗？

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

Answer 1

默认的 Flutter Snackbar 没有提供太多的自定义方式。 您可以使用的一个库称为getx 。 它是一个 package，它提供了很多东西，其中包括一个非常灵活的小吃店。 这是我能够提出的向上/向下动画，而不是淡入/淡出。

class SnackbarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;
    final bool isThemeDark = theme.brightness == Brightness.dark;
    final Color themeBackgroundColor = isThemeDark
        ? colorScheme.onSurface
        : Color.alphaBlend(colorScheme.onSurface.withOpacity(0.80), colorScheme.surface);

    return Center(
      child: TextButton(
        child: Text(
          'Show snackbar',
          style: TextStyle(fontSize: 20),
        ),
        onPressed: () {
          Get.snackbar(
            '',
            '',
            snackPosition: SnackPosition.BOTTOM,
            snackStyle: SnackStyle.FLOATING,
            messageText: Text(
              'Product removed from cart',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15,
                fontWeight: FontWeight.w400,
              ),
            ),
            titleText: Container(),
            margin: const EdgeInsets.only(bottom: kBottomNavigationBarHeight, left: 8, right: 8),
            padding: const EdgeInsets.only(bottom: 4, left: 16, right: 16),
            borderRadius: 4,
            backgroundColor: themeBackgroundColor,
            colorText: Theme.of(context).colorScheme.surface,
            mainButton: TextButton(
              child: Text('Undo'),
              onPressed: () {},
            ),
          );
        },
      ),
    );
  }
}

Answer 2

导入“ fluttertoast ”package 并像这样使用...

Fluttertoast.showToast(
        msg:"Toast Message",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM,
        timeInSecForIosWeb: 1,
        textColor: Colors.white,
        backgroundColor: Colors.black54,
        fontSize: 16.0)

Answer 3

我已经尝试了好几天和好几个月了，不幸的是官方文档没有给我们提供使用animation道具的例子。

但我有一个好消息，我通过使用名为another_flushbar的 package 找到了解决方法

---

类型

1.默认的SnackBar

          Flushbar(
            duration: const Duration(milliseconds: 3000),
            message: "Default Snackbar",
            margin: const EdgeInsets.symmetric(vertical: 20),
          ).show(context);

2. 带有easeIn和easeOut的底部 SnackBar

            Flushbar(
              animationDuration: const Duration(seconds: 2),
              forwardAnimationCurve: Curves.easeIn,
              reverseAnimationCurve: Curves.easeOut,
              duration: const Duration(milliseconds: 3000),
              flushbarPosition: FlushbarPosition.BOTTOM,
              flushbarStyle: FlushbarStyle.FLOATING,
              message: "I am Bottom Snackbar",
              margin: const EdgeInsets.symmetric(vertical: 20),
            ).show(context);

3. 使用easeIn和easeOut的顶级 SnackBar

            Flushbar(
              animationDuration: const Duration(seconds: 2),
              forwardAnimationCurve: Curves.easeIn,
              reverseAnimationCurve: Curves.easeOut,
              duration: const Duration(milliseconds: 3000),
              flushbarPosition: FlushbarPosition.TOP,
              flushbarStyle: FlushbarStyle.FLOATING,
              message: "I am Top Snackbar",
              margin: const EdgeInsets.symmetric(vertical: 20),
            ).show(context);

4. 带有bounceInOut的 Snackbar

             Flushbar(
              animationDuration: const Duration(seconds: 2),
              forwardAnimationCurve: Curves.bounceInOut,
              reverseAnimationCurve: Curves.bounceInOut,
              duration: const Duration(milliseconds: 3000),
              flushbarPosition: FlushbarPosition.BOTTOM,
              flushbarStyle: FlushbarStyle.FLOATING,
              message: "Snackbar can bounce ",
              margin: const EdgeInsets.symmetric(vertical: 20),
            ).show(context);

---

额外的：

github中存在一个针对相同问题的问题。