Motion Toast


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

motion_toast_from_right.gifmotion_toast_bounce.gif
center_motion_toast.gifcenter_motion_toast_2.gif
top_left_animation.giftop_top_animation.gif

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

NameTypeDescriptionRequiredDefault Value
descriptionWidgetThe description texttrueN/A
titleWidgetThe toast titlefalseempty string
constraintsBoxConstraintThe toast box constraintfalsenull
iconIconDataThe toast iconrequired when creating a custom toast otherwise you don't have to pass itN/A
primaryColorColorThe motion toast background color (applied on the background)required when creating a custom toast otherwise you don't have to pass itN/A
widthdoubleThe motion toast widthfalsenull
heightdoubleThe motion toast heightfalsenull
iconSizedoubleThe icon sizefalse40
iconTypeICON_TYPE StringThe design type of the icon (Material design or Cupertino) values: ICON_TYPE.MATERIAL_DESIGN or ICON_TYPE.CUPERTINOfalseICON_TYPE.MATERIAL_DESIGN
enableAnimationbooleanWhether enable or disable the animation applied on the icon (heartbeat animation)falsetrue
layoutOrientationORIENTATIONthe layout orientation of the toast (from left to right LTR or from right to left RTLfalseORIENTATION.LTR
animationTypeANIMATIONthe toast enter animationfalseANIMATION.FROM_BOTTOM
animationDurationDurationthe animation durationfalseDuration(milliseconds: 1500)
toastDurationDurationHow much the toast will be shownfalseDuration(seconds: 3)
animationCurveCurvesThe toast animation curvefalseCurves.ease
positionMOTION_TOAST_POSITIONThe position where the toast will be displayed (TOP, BOTTOM, CENTER)falseMOTION_TOAST_POSITION.BOTTOM
borderRadiusdoubledefine the radius of the toastfalse20
onCloseFunctionfunction invoked once the toast in closedfalsenull
dismissablebooldefine whether the toast can be dismissed or not (applied only on bottom motion taost)falsetrue
secondaryColorColorSecondary color applied on the sidebar and the icon (available when using the default constructor)falsenull
backgroundTypeBACKGROUND_TYPEdefine the background style transparent, solid or lighterfalseBACKGROUND_TYPE.lighter
barrierColorColorthe barrier colorfalseColors.transparent
  • 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!

BuyMeACoffee on CocoaPods.org

Contributors

Libraries

arrays
colors
heart_beat_icon
motion_toast
motion_toast_background
motion_toast_content
motion_toast_icon
motion_toast_side_bar
seperator