时间戳

首页 > 解决方案 > 如何在flutter中实现浮动Snackbar动画？

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

问题描述

我正在尝试在浮动 Snackbar 中实现动画，它从屏幕底部出现并向上移动，就像 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**
                      }

标签： androidflutteranimationsnackbar

解决方案

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

小吃店演示

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

推荐阅读