0 purchases
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
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.