How to implement floating Snackbar animation in flutter?

user_13506630 0
Viewed 3606

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**
                      }
snackbar flutter animation android
1 Answers

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