如何在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中存在一個針對相同問題的問題。