Are you bored with the causal look of the toast message and looking for a styled toast message instead?
Are you looking for a way to show toast message in Flutter with decoration and animation?
In this case, Flutter Styled Toast is what you’re looking for!
Flutter styled toast is a package that allows you to customize toast messages with a series of animation to beautify their look and make them more attractive.
We know that there are several ways to display a feedback message to the users and that toast is a famous one. So why not making it attractive and unique?
In this post, we’ll go through several examples that’ll teach you how to show toast in Flutter and how to implement Flutter toast animation.
Installing the package
In order to use any package in Flutter, you need to add it to your project. You can do so by typing a command in the terminal
flutter pub add flutter_styled_toast
or adding it manually to pubspec.yaml file in the dependencies section
flutter_styled_toast: ^2.1.3
Once done, run flutter pub get.
After that, you need to import the library in the dart file where you’ll implement the toast message.
import 'package:flutter_styled_toast/flutter_styled_toast.dart';
That’s it, your project is now set up.
Flutter Styled Toast Parameters
| Parameter | Description |
| msg | String. The text that appears inside the toast. |
| context | BuildContext (If you don’t wrap app with StyledToast, context is required, otherwise, is not) |
| duration | Duration (default 2.3s)(When set [duration] to Duration.zero, toast won’t dismiss automatically) |
| animDuration | Duration (default 400 milliseconds, animDuration * 2 <= duration, conditions must be met for toast to display properly) |
| position | StyledToastPosition (default StyledToastPosition.bottom) |
| backgroundColor | Color (default Color(0x99000000)) |
| borderRadius | BorderRadius (BorderRadius.circular(5.0)) |
| textStyle | TextStyle (default TextStyle(fontSize: 16.0,fontWeight: FontWeight.normal,color: Colors.white)) |
| shapeBorder | ShapeBorder (default RoundedRectangleBorder(borderRadius: borderRadius)) |
| onDismiss | VoidCallback (Invoked when toast dismiss) |
| textDirection | TextDirection (default TextDirection.ltr) |
| toastPosition | |
| toastAnimation | StyledToastAnimation (default StyledToastAnimation.fade) |
| textAlign | TextAlign (default TextAlign.center) |
| alignment | AlignmentGeometry (default Alignment.center) |
| axis | Axis (default Axis.vertical) |
| curve | Curve (default Curves.linear) |
Flutter Styled Toast Message Example
Since there are several styles that can be applied for toast messages, I’ll demonstrate them separately to show you how they differ from each other.
Normal Toast
showToast('This is a normal toast',
context: context,
axis: Axis.horizontal,
alignment: Alignment.center,
position: StyledToastPosition.bottom);
Permanent Toast
showToast( 'This is a permanent toast', context: context, duration: Duration.zero, );
Full Width Toast
showToast( 'This is full width toast', context: context, axis: Axis.horizontal, alignment: Alignment.center, position: StyledToastPosition.bottom, borderRadius: BorderRadius.zero, toastHorizontalMargin: 0, fullWidth: true, );
Custom Border Radius Toast
showToast('This is Custom Border Radious Toast',
context: context,
textStyle: TextStyle(fontSize: 20.0, color: Colors.red),
backgroundColor: Colors.yellow,
textPadding:
EdgeInsets.symmetric(vertical: 20.0, horizontal: 30.0),
borderRadius: BorderRadius.vertical(
top: Radius.elliptical(10.0, 20.0),
bottom: Radius.elliptical(10.0, 20.0)),
textAlign: TextAlign.justify,
textDirection: TextDirection.rtl);
Toast with Fading Animation
showToast('This is toast with fading animation',
context: context,
animation: StyledToastAnimation.fade,
curve: Curves.linear,
reverseCurve: Curves.linear);
Toast with Sliding From Top Animation
showToast('This is toast with sliding from top animation',
context: context,
animation: StyledToastAnimation.slideFromTop,
reverseAnimation: StyledToastAnimation.slideToTop,
position: StyledToastPosition.top,
startOffset: Offset(0.0, -3.0),
reverseEndOffset: Offset(0.0, -3.0),
duration: Duration(seconds: 4),
animDuration: Duration(seconds: 1),
curve: Curves.elasticOut,
reverseCurve: Curves.fastOutSlowIn);
Toast with Sliding From Left Animation
showToast('This is toast with slide from left animation',
context: context,
animation: StyledToastAnimation.slideFromLeft,
reverseAnimation: StyledToastAnimation.slideToTop,
position: StyledToastPosition.top,
startOffset: Offset(-1.0, 0.0),
reverseEndOffset: Offset(-1.0, 0.0),
duration: Duration(seconds: 4),
animDuration: Duration(seconds: 1),
curve: Curves.elasticOut,
reverseCurve: Curves.fastOutSlowIn);
Toast with Sliding From Right Animation
showToast('This is toast with slide from right animation',
context: context,
animation: StyledToastAnimation.slideFromRight,
reverseAnimation: StyledToastAnimation.slideToRight,
position: StyledToastPosition.top,
startOffset: Offset(1.0, 0.0),
reverseEndOffset: Offset(1.0, 0.0),
animDuration: Duration(seconds: 1),
duration: Duration(seconds: 4),
curve: Curves.linearToEaseOut,
reverseCurve: Curves.fastOutSlowIn);
Toast with Scale Animation
showToast('This is toast with scale animation',
context: context,
animation: StyledToastAnimation.scale,
reverseAnimation: StyledToastAnimation.fade,
position: StyledToastPosition.center,
animDuration: Duration(seconds: 1),
duration: Duration(seconds: 4),
curve: Curves.elasticOut,
reverseCurve: Curves.linear);
Toast with Fade Scale Animation
showToast('This is fade scale animated toast',
context: context,
animation: StyledToastAnimation.fadeScale,
reverseAnimation: StyledToastAnimation.scaleRotate,
position: StyledToastPosition.center,
animDuration: Duration(seconds: 1),
duration: Duration(seconds: 4),
curve: Curves.linear,
reverseCurve: Curves.linear);
Toast with Fade Rotation Animation
showToast('This is toast with fade & rotation animation',
context: context,
backgroundColor: Colors.deepPurple,
axis: Axis.horizontal,
position: StyledToastPosition.bottom,
duration: const Duration(seconds: 5),
curve: Curves.bounceIn,
animDuration: const Duration(seconds: 2),
animation: StyledToastAnimation.fadeRotate);
Conclusion
This brings an end to this tutorial where we learnt various ways to add styling and animation to flutter toast messages. We always look for ways to make our apps unique and outstanding therefore considering adding stylish and decorated toast messages will be very helpful. Of course considering other stuff such as decorative texts and buttons might also do the work.
I hope I was able to guide you how to create styled toast message and apply animation to it in your Flutter apps.
Please don’t hesitate to support this blog with a like and share if you find its content useful. If you wish to learn more about Flutter programming, you can access a whole Flutter category with plenty of useful topics related to it.
Also, don’t forget to like and share my Facebook page, share the post with those who care to learn, and subscribe to my blog to be one of the firsts to know about my newest posts!
Thank you and happy coding!
