customtoastshow

Description:

customtoastshow

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
copied to clipboard
Or you can reference the main repository directly by adding those lines
dependencies:
customtoastshow:
git: https://github.com/palashsethiya/ToastHandler.git
copied to clipboard
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 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 it
N/A


width
double
The custom toast width
false
350


height
double
The custom toast height
false
80


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





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

copied to clipboard

Warning Toast


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

copied to clipboard

Error Toast


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

copied to clipboard

Info Toast

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

copied to clipboard

Delete Toast


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

copied to clipboard

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

copied to clipboard

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

copied to clipboard

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

copied to clipboard

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

copied to clipboard

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);
copied to clipboard