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
  • 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

Getting Started

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

dependencies:
	motion_toast: ^1.2.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

NameTypeDescriptionRequiredDefault Value
descriptionStringThe description texttrueN/A
titleStringThe toast titlefalseempty string
descriptionStyleTextStyleThe text style applied on the description textfalseTextStyle(color: Colors.black)
titleStyleTextStyleThe text style applied on the titlefalseTextStyle(color: Colors.black)
iconIconDataThe toast iconrequired when creating a custom toast otherwise you don't have to pass itN/A
colorColorThe 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 itN/A
widthdoubleThe motion toast widthfalse350
heightdoubleThe motion toast heightfalse80
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
  • 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

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);

  • 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:  "Top Motion Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "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:  "Center Motion Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Another motion toast example",
	position:  MOTION_TOAST_POSITION.CENTER
).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

Libraries

arrays
colors
constants
heart_beat_icon
motion_toast