In this article, we will explore the Motion Toast In Flutter. We will see how to implement a demo program to create a motion toast and also shows a display animation in your flutter applications.
Table Of Contents:
Flutter motion toast attributes
Flutter Motion Toast / Styled Toast Built-In Types
What is Motion Toast?:
Motion toast is an open-source flutter package that lets you display messages in toast in a user-friendly way, with multiple built-in themes.
Motion toast also has built-in display animations and you can define its position (Bottom, Center, Top).
Installation:
To create and show a motion toast message in flutter follow the steps below:
- > Create a flutter project
- > Add motion_toast dependency to the project
- > Import the motion toast package:-
import 'package: motion_toast/motion_toast.dart';- > Implement code for creating and showing motion toast in a flutter.
Run this command:
OR
To get motion_toast working on your project all you need to do is to add this line to your pubspec.yaml file under dependencies
Flutter Motion Toast Attributes:
1:-description the String content that will be used in the motion toast itself will be displayed to users, this parameter is required for all constructors.
MotionToast(
icon: Icons.alarm,
primaryColor: Colors.red,
description: 'this is description',
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
2:- title:- the title is String toast, by default, it’s an empty string for all the constructors.
MotionToast(
icon: Icons.alarm,
primaryColor: Colors.red,
description: 'this is description',
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
3:- descriptionStyle is the text style that will be applied to the description text.
MotionToast(
primaryColor: Colors.green,
description: "This is description",
icon: Icons.message,
descriptionStyle: TextStyle(
fontSize: 14,
color: Colors.deepOrange
),
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
4:- titleStyl is the text style that will be applied on the title text.
MotionToast(
primaryColor: Colors.blue,
description: "This is description",
icon: Icons.message,
title: "Message",
titleStyle: TextStyle(
fontSize: 16,
fontWeight:FontWeight.bold,
color: Colors.deepOrange
),
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
5:-icon is the IconData that will render in the motion toast, this parameter is required when creating a custom toast otherwise you don’t have to pass it.
MotionToast(
primaryColor: Colors.yellow,
description: "This is description",
icon: Icons.video_label,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
6:-primaryColor The motion toast background color (applied on the background), this parameter is required when creating a custom toast otherwise you don’t have to pass it.
MotionToast(
icon: Icons.alarm,
primaryColor: Colors.red,
description:
'this is description',
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
7:-widththe width of the toast is not required & its default value is 350.
MotionToast(
primaryColor: Colors.blue,
description: "This is description",
icon: Icons.message,
width: 300,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
8:-height the height of the toast & its default value is 80.
MotionToast(
primaryColor: Colors.blue,
description: "This is description",
icon: Icons.message,
width: 300,
height: 130,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
9:-iconSizethis is required a double value & its default value is 40.
MotionToast(
primaryColor: Colors.yellow,
description: "This is description",
icon: Icons.message,
iconType: ICON_TYPE.CUPERTINO,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
10:-iconType the style type of the icon (Cupertino or Material Design).
MotionToast(
primaryColor: Colors.red,
description: "This is description",
icon: Icons.message,
iconType: ICON_TYPE.cupertino,
).show(context);11:-enableAnimation define whether the toast will be animated or not, by default it’s true.MotionToast(
primaryColor: Colors.yellow,
description: “This is description”,
icon: Icons.message,
enableAnimation: false,
).show(context);
12:-layoutOrientation define how the toast layout will be rendered LTR or RTL.
MotionToast(
primaryColor: Colors.green,
description: "This is description",
icon: Icons.message,
layoutOrientation: ORIENTATION.rtl,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
13:-animationType the type of animation applied to the toast (From the bottom, from left, from right, from top) by default its value is from the bottom.
MotionToast(
primaryColor: Colors.green,
description: "This is description",
icon: Icons.message,
animationType: ANIMATION.fromLeft,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen video.
14:-animationDurationthe duration of the animation by default its value is Duration(milliseconds: 1500) .
MotionToast(
primaryColor: Colors.green,
description: "This is description",
icon: Icons.message,
enableAnimation: false,
animationDuration: Duration(seconds: 3),
).show(context);15:-toastDurationthe duration the how much the toast will be shown, by default the toast takes 3 seconds.
MotionToast(
primaryColor: Colors.blue,
description: "This is description",
icon: Icons.message,
toastDuration: Duration(seconds: 3),
).show(context);16:-animationCurvethe animation rendering curve, by default its value is Curves.ease.
MotionToast(
primaryColor: Colors.green,
description: "This is description",
icon: Icons.message,
animationCurve: Curves.bounceIn,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen video.
17:-positionthe position where the toast will be displayed (TOP, BOTTOM, CENTER).
MotionToast(
primaryColor: Colors.green,
description: "This is description",
icon: Icons.message,
position: MOTION_TOAST_POSITION.TOP,
animationType: ANIMATION.FROM_TOP,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
18:-borderRadiusthe radius of the borders of the toast.
MotionToast(
primaryColor: Colors.yellow,
description: "This is description",
icon: Icons.message,
borderRadius: 20,
).show(context);19:-onClosefunction invoked once the toast is closed.
MotionToast(
primaryColor: Colors.purple,
description: "This is description",
icon: Icons.message,
onClose: (){
print("close");
},
).show(context);20:-dismissabledefine whether the toast can be dismissed or not (applied only on bottom motion toast).
MotionToast(
primaryColor: Colors.purple,
description: "This is description",
icon: Icons.message,
dismissable: true,
).show(context);21:-secondaryColorSecondary color applied on the sidebar and the icon (available when using the default constructor).MotionToast(
primaryColor: Colors.purple,
description: “This is description”,
icon: Icons.message,
secondaryColor: Colors.grey,
).show(context);
22:-backgroundTypedefine the background style transparent, solid, or lighter.
MotionToast(
primaryColor: Colors.purple,
description: "This is description",
icon: Icons.message,
backgroundType: BACKGROUND_TYPE.lighter,
).show(context);Flutter Motion Toast / Styled Toast Built-In Types:
1:-Success
MotionToast.success(
title: "Success Motion Toast",
description: "Example of success motion toast",
width: 300,
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
2:-Error
MotionToast.error(
title: "Error",
description: "Example of error toast"
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
3:-Warning
MotionToast.warning(
title: "Warning Motion Toast",
description: "This is a Warning toast "
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
4:-Delete
MotionToast.delete(
title: "Deleted",
description: "The item is deleted"
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
5:-Info
MotionToast.info(
title: "Info Motion Toast",
description: "Example of Info Toast"
).show(context);When we run the application, we ought to get the screen’s output like the underneath screen capture.
Final Output:
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Conclusion:
In this article, we discussed how this package can be used, what are all the parameters that you can use to customize the display of it, and also it provides multiple features to customize the toast.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the Motion Toast:
GitHub – flutter-devs/flutter_motion_toast
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
