如何在flutter中实现浮动的Snackbar动画？

Question

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

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。它是一个提供很多东西的包，其中包括一个非常灵活的小吃店。这是我能够想出的动画 up/down 而不是淡入淡出 in/out.

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: () {},
            ),
          );
        },
      ),
    );
  }
}

如何在flutter中实现浮动的Snackbar动画？

How to implement floating Snackbar animation in flutter?

animation

android

snackbar

flutter