TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them.
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
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 toFROM_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);