motion_toast 1.1.0

A beautiful designed toast with animations, contains multiple built in designs and let you design your toast

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
• Support null safety
• Heartbeat animations
• Full customized text
• Built in animations
• Customize toast layout (LTR/RTL)
• Customize toast duration

Getting Started

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

dependencies:
 motion_toast: ^1.1.0

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	String	The description text	true	N/A
title	String	The toast title	false	empty string
descriptionStyle	TextStyle	The text style applied on the description text	false	TextStyle(color: Colors.black)
titleStyle	TextStyle	The text style applied on the title	false	TextStyle(color: Colors.black)
icon	IconData	The toast icon	required when creating a custom toast otherwise you don't have to pass it	N/A
color	Color	The motion toast background color (applied on the background, icon and side bar)	required when creating a custom toast otherwise you don't have to pass it	N/A
width	double	The motion toast width	false	250
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

=> When creating you custom toast you don't have to use iconType it will not be used when rendering the toast

Implementation

• Success Motion Toast

 MotionToast.success(
		 title:  "Success Motion Toast",
		 titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
		 description:  "Example of success motion toast",
		 descriptionStyle:  TextStyle(fontSize:  12),
		 width:  300,
).show(context);

• Warning Motion Toast

 MotionToast.warning(
		 title:  "Warning Motion Toast",
		 titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
		 description:  "This is a Warning"
).show(context);

• Error Motion Toast

 MotionToast.error(
		 title:  "Error",
		 titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
		 description:  "Please enter your name"
).show(context);

• Info Motion Toast

 MotionToast.info(
		 title:  "Info Motion Toast",
		 titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
		 description:  "Example of Info Toast"
).show(context);

• Delete Motion Toast

 MotionToast.delete(
		 title:  "Deleted",
		 titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
		 description:  "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,
		 color:  Colors.pink,
		 title:  "Custom Toast",
		 titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
		 description:  "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:  "من اليمين",
	 titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	 description:  "هذا مثال بالعربية",
	 descriptionStyle:  TextStyle(fontSize:  12),
	 layoutOrientation:  ORIENTATION.RTL,
	 animationType:  ANIMATION.FROM_RIGHT,
	 width:  300,
).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!