How to implement floating Snackbar animation in flutter?

2,770

The default Flutter Snackbar doesn't offer much in the way of customization. One library you can use is called getx. It is a package that offers many things, among them, a pretty flexible snackbar. Here is what I was able to come up with that animates up/down as opposed to the fade in/out.

Snackbar demo

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: () {},
            ),
          );
        },
      ),
    );
  }
}
Share:
2,770
Sheldon
Author by

Sheldon

Updated on December 29, 2022

Comments

  • Sheldon
    Sheldon over 1 year

    I'm trying to implement animation in floating Snackbar in which it emerges from the bottom of the screen and moves up, just like the one in Gmail app which emerges on sliding a mail for achive. Could someone please post an example?

    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**
                          }