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.
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: () {},
),
);
},
),
);
}
}
Author by
Sheldon
Updated on December 29, 2022Comments
-
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** }