Motion Toast

A new well designed toast with animations and multiple built-in types

Features

Animated toasts with animated icons
Built-in types (Success, Warning, Error, Info, Delete)
Possibility to design your own toast
Different color themes (mutliple colors support)
Support null safety
Heartbeat animations
Full customized text
Built in animations
Customize toast layout (LTR/RTL)
Customize toast duration
Customize Motion toast position (Center, Bottom, Top)
Support long text
Background style customization
Display simultaneous toasts
Customizable barrier color
Enable dismiss when toast is displayed (top, center, bottom)
Responsive toast according to device size
Customizable width and height
Customizable box constraints

Getting Started

In order to add motion toast to your project add this line to your pubspec.yaml file

dependencies:
	motion_toast: ^2.3.2

Or you can reference the main repository directly by adding those lines

dependencies:
	motion_toast:
		git: https://github.com/koukibadr/Motion-Toast.git

Attributes

Name	Type	Description	Required	Default Value
description	`Widget`	The description text	true	N/A
title	`Widget`	The toast title	false	empty string
constraints	`BoxConstraint`	The toast box constraint	false	null
icon	`IconData`	The toast icon	required when creating a custom toast otherwise you don't have to pass it	N/A
primaryColor	`Color`	The motion toast background color (applied on the background)	required when creating a custom toast otherwise you don't have to pass it	N/A
width	`double`	The motion toast width	false	null
height	`double`	The motion toast height	false	null
iconSize	`double`	The icon size	false	40
iconType	`ICON_TYPE` String	The design type of the icon (Material design or Cupertino) values: `ICON_TYPE.MATERIAL_DESIGN or ICON_TYPE.CUPERTINO`	false	`ICON_TYPE.MATERIAL_DESIGN`
enableAnimation	`boolean`	Whether enable or disable the animation applied on the icon (heartbeat animation)	false	true
layoutOrientation	`ORIENTATION`	the layout orientation of the toast (from left to right LTR or from right to left RTL	false	`ORIENTATION.LTR`
animationType	`ANIMATION`	the toast enter animation	false	`ANIMATION.FROM_BOTTOM`
animationDuration	`Duration`	the animation duration	false	`Duration(milliseconds: 1500)`
toastDuration	`Duration`	How much the toast will be shown	false	`Duration(seconds: 3)`
animationCurve	`Curves`	The toast animation curve	false	`Curves.ease`
position	`MOTION_TOAST_POSITION`	The position where the toast will be displayed (TOP, BOTTOM, CENTER)	false	`MOTION_TOAST_POSITION.BOTTOM`
borderRadius	`double`	define the radius of the toast	false	20
onClose	`Function`	function invoked once the toast in closed	false	null
dismissable	`bool`	define whether the toast can be dismissed or not (applied only on bottom motion taost)	false	true
secondaryColor	`Color`	Secondary color applied on the sidebar and the icon (available when using the default constructor)	false	null
backgroundType	`BACKGROUND_TYPE`	define the background style transparent, solid or lighter	false	`BACKGROUND_TYPE.lighter`
barrierColor	`Color`	the barrier color	false	`Colors.transparent`
hideSideBar	`bool`	the side bar	false	null

When creating you custom toast you don't have to use iconType it will not be used when rendering the toast
For bottom toast you can't set the animation FROM_TOP as well as for top displayed toast you can't set the animation to FROM_BOTTOM
for center motion toast it will be rendered without animations
if secondaryColor not defined sidebar and icon will be rendered with primaryColor

if constraint and width and height are not defined the toast will be displayed with

BoxConstraints(
	maxWidth: MediaQuery.of(context).size.width * 0.75,
	minWidth: 200,
	maxHeight: 100,
)

otherwise if width and height are defined the constraints attribute will be ignored and if you define width you need to define height also and vice versa

Implementation

Success Motion Toast

MotionToast.success(
	title:  Text("Success Motion Toast"),
	description:  Text("Example of success motion toast"),
	width:  300
).show(context);

Warning Motion Toast

MotionToast.warning(
	title:  Text("Warning Motion Toast"),
	description:  Text("This is a Warning")
).show(context);

Error Motion Toast

MotionToast.error(
	title:  Text("Error"),
	description:  Text("Please enter your name")
).show(context);

Info Motion Toast

MotionToast.info(
	title:  Text("Info Motion Toast"),
	description:  Text("Example of Info Toast")
).show(context);

Delete Motion Toast

MotionToast.delete(
	title:  Text("Deleted"),
	description:  Text("The item is deleted")
).show(context);

Custom Motion Toast

To create your custom toast just use the default constructor, icon description and color are required

MotionToast(
	icon: Icons.alarm,
	primaryColor: Colors.pink,
	title:  Text("Custom Toast"),
	description:  Text("You can customize the toast!"),
	width:  300
).show(context);

Right-Designed Motion Toast

To change the toast layout you need to use layoutOrientation, icon description and color are required

MotionToast.success(
	title:  Text("من اليمين"),
	description:  Text("هذا مثال بالعربية"),
	layoutOrientation: ORIENTATION.RTL,
	animationType: ANIMATION.FROM_RIGHT,width:  300,
).show(context);

Top-displayed Motion Toast

To change the display position of the motion toast use position attribute

MotionToast(
	icon: Icons.zoom_out,
	color: Colors.deepOrange,
	title:  Text("Top Motion Toast"),
	description:  Text("Another motion toast example"),
	position: MOTION_TOAST_POSITION.TOP,
	animationType: ANIMATION.FROM_TOP,
).show(context);

Center-displayed Motion Toast

MotionToast(
	icon: Icons.zoom_out,
	color: Colors.deepOrange,
	title:  Text("Center Motion Toast"),
	description:  Text("Another motion toast example"),
	position: MOTION_TOAST_POSITION.CENTER
).show(context);

Using onClose parameter (display two successive toasts)

MotionToast.success(
	title:  Text("User Data"),
	description:  Text("Your data has been deleted"),
	onClose: (){
		MotionToast.error(
			title:  Text("User Data"),
			description:  Text("Your data has been deleted"),
		).show(context);
	},
).show(context);

Two-Colors Motion Toast

MotionToast(
	icon: Icons.zoom_out,
	primaryColor: Colors.orange[500]!,
	secondaryColor: Colors.grey,
	backgroundType: BACKGROUND_TYPE.solid,
	title:  Text('Two Color Motion Toast'),
	description:  Text('Another motion toast example'),
	position: MOTION_TOAST_POSITION.top,
	animationType: ANIMATION.fromTop,
	height:  100,
).show(context);

Transparent background motion toast

MotionToast(
	icon: Icons.zoom_out,
	primaryColor: Colors.grey[400]!,
	secondaryColor: Colors.yellow,
	backgroundType: BACKGROUND_TYPE.transparent,
	title:  Text('Two Color Motion Toast'),
	description:  Text('Another motion toast example'),
	position: MOTION_TOAST_POSITION.center,
	height:  100,
).show(context);

Contribution

Of course the project is open source, and you can contribute to it repository link

If you found a bug, open an issue.
If you have a feature request, open an issue.
If you want to contribute, submit a pull request.

Support The Community

If you like the package and want to support the dev team follow the donation link below. Thanks for your support!

lkaopremier/motion_toast