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).
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
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
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
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
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
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
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.
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
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
A new well designed toast with animations and multiple built-in types Animated toasts with animated icons Built-in…
motion_toast | Flutter Package
A beautiful designed toast with animations, contains multiple built in designs and let you design your toast
happy coding and I hope you’ve learned something new!