Features

  • Heartbeat animations
  • Full customized text
  • Built in animations
  • Customize toast layout (LTR/RTL)
  • Customize toast duration
  • Customize toast position (Center, Bottom, Top)
  • Animated toasts with animated icons
  • Built-in types (Success, Warning, Error, Info, Delete)
  • Possibility to design your own toast
  • Support null safety
  • Support long text

Getting started

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

dependencies:
	customtoastshow: ^1.6.0

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

dependencies:
	customtoastshow:
		git: https://github.com/palashsethiya/ToastHandler.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 custom 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 custom toast widthfalse350
heightdoubleThe custom 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
onCloseFunctionfunction invoked once the toast in closedfalsenull
  • 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 custom toast it will be rendered without animations

Implementation

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

  • Warning Toast

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

  • Error Toast

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

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

  • Delete Toast

CustomToast.delete(
	title:  "Deleted",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "The item is deleted"
).show(context);

  • Custom Toast

To create your custom toast just use the default constructor,

icon description and color are required

CustomToast(
	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 Toast

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


CustomToast.success(
	title:  "Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Customize Toast",
	descriptionStyle:  TextStyle(fontSize:  12),
	layoutOrientation:  ORIENTATION.RTL,
	animationType:  ANIMATION.FROM_RIGHT,width:  300,
).show(context);

  • Top-displayed Toast

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


CustomToast(
	icon:  Icons.zoom_out,
	color:  Colors.deepOrange,
	title:  "Top  Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Another custom toast example",
	position:  MOTION_TOAST_POSITION.TOP,
	animationType:  ANIMATION.FROM_TOP,
).show(context);

  • Center-displayed Toast
CustomToast(
	icon:  Icons.zoom_out,
	color:  Colors.deepOrange,
	title:  "Center  Toast",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Another custom toast example",
	position:  MOTION_TOAST_POSITION.CENTER
).show(context);

  • Using onClose parameter (display two successive toasts)
CustomToast.success(
	title:  "User Data",
	titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
	description:  "Your data has been deleted",
	descriptionStyle:  TextStyle(fontSize:  12),
	onClose: (){
		CustomToast.error(
			title:  "User Data",
			titleStyle:  TextStyle(fontWeight:  FontWeight.bold),
			description:  "Your data has been deleted",
			descriptionStyle:  TextStyle(fontSize:  12),
		).show(context);
	},
).show(context);

Libraries

arrays
colors
constants
CustomToast
heart_beat_icon
motion_toast_background
motion_toast_content
motion_toast_icon
motion_toast_side_bar
seperator