Flutter Motion Toast in details

In this article we will dig deep inside the flutter package motion_toast and see what we can build with it and how it can be improved.

What is Motion Toast ?

Motion toast is a new open source flutter package that let you display messages in user friendly way, with multiple built-in themes and the possibility to create you own theme.

Motion toast also have built-in display animations and you have the possibility to define it’s position (Center, Bottom, Top).

Installation

In order 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`

motion_toast: ^1.1.0

Parameters and constructors

before dive in all the parameters let me highlight that in order to display a motion toast with built-in theme all you need is one parameter description and to create a custom theme and display it you need to pass only three parameters description icon and color

and now let me explain to you all the parameters that you can use to customize you own motion toast

description the text content that will be used in the motion toast itself that will be displayed to your users, this parameter is required for all constructors

icon is the icon that will rendered in the motion toast, this parameter is available only when you are using the default constructor MotionToast()

color is the color applied to the toast, this color will be on the toast iteself with little bit of opacity and will be on the side bar on the left/right, this parameter is required when using the default constructor.

title the title of the toast, by default it’s an empty string for all the constructors.

descriptionStyle is the text style that will be applied on the description text.

titleStyle is the same as descriptionStyle but applied on the title text this time.

iconType` the style type of the icon (Cupertino or Material Design), this type is only available if you are using one of the built in themes (success, error, warning, info, delete),

width`the width of the toast, is not required

height` the height of the toast.

iconSize` double value defining the size of the icon.

enableAnimation` define whether the toast will be animated or not, by default it’s true

layoutOrientation` define how the toast layout will be rendered LTR or RTL (for arabic text)

animationType` the type of the animation applied to the toast (From bottom, from left, from right , from top) by default it’s set to FROM_BOTTOM

animationDuration` the duration of the animation by default the animation takes 1.5 seconds

toastDuration` the duration the toast will take before exiting the screen, by default the toast takes 3 seconds

animationCurve` the animation rendering curve, by default it’s set to Curves.ease

position` the toast display position center, bottom or top. by default the toast is displayed in the bottom of the screen

borderRadius` the radius of the borders of the toast

Examples

In this section we will dig deep into some examples of the motion toast use cases and code snippets and how to use the motion toast in your project.

The motion toast offer multiple built-in themes, success, error, info, delete and warning and of course you can create your own theme.

Success theme

With only one parameter you can create a success theme toast

MotionToast.success(description: "Your data has been updated").show(context);

and this is the result of the code above

but if you want more customization you can add other parameters like this code below

for other themes the same parameters are available you need only to change the constructor as you will see below

Error motion toast theme

Info motion toast theme

Warning motion toast theme

Delete motion toast theme

Create custom motion toast

In order to create a customized motion toast you need to use all the required parameters that are:

• icon (IconData)
• description (String text)
• color (Color object)

and of course as we discussed in the previous section there are plenty of other parameters but those one are the required to create a custom motion toast

this code snippet will render a toast like the one showed below

When I can use this package ?

This package helps you to display custom elegant messages to your users or important notifications.

If you are implementing custom design into your app the best way to use this package is to use the custom constructor options to avoid any incoherence in terms of UI.

for those who are building an app that need lot of resources and don’t want any package to consume resources more than it should be, this package don’t need lot of resources also in terms of memory this package dispose all async components once the toast is finished.

When should I avoid this package ?

motion toast 1.0.3 doesn’t support displaying multiple toast in a short time, so this may produce problems into your app especially when you have a use case when you need to display multiple toast quickly. hoping that this bug will be fixed in the next version 1.0.4

Conclusion

To conclude this article I want to highlight that this package is evolving always and you can expect new versions and new features.

In this article we discussed about how this package can be used, what are all the parameters that you can use to customize the display of it and when to use it and in which case you can avoid using this package.

you can also check those links below of the github repository where you can send me your issues if you’ve faced one and the link of the official package page on pub.dev

GitHub - koukibadr/Motion-Toast

motion_toast | Flutter Package

happy coding and I hope you’ve learned something new!