Flutter自定义Toast提示插件customtoastshow的使用
Flutter自定义Toast提示插件customtoastshow的使用
特性
以下是customtoastshow
插件的主要特性:
- 心跳动画
- 完全可定制的文字
- 内置动画效果
- 支持左右布局(LTR/RTL)
- 可自定义Toast显示时长
- 支持顶部、底部或居中显示
- 带有动画图标的Toast
- 内置类型(成功、警告、错误、信息、删除)
- 支持自定义设计Toast
- 支持空安全
- 支持长文本
开始使用
在你的pubspec.yaml
文件中添加以下依赖项:
dependencies:
customtoastshow: ^1.6.0
或者直接引用主仓库:
dependencies:
customtoastshow:
git: https://github.com/palashsethiya/ToastHandler.git
然后运行flutter pub get
以安装依赖。
属性说明
名称 | 类型 | 描述 | 是否必需 | 默认值 |
---|---|---|---|---|
description |
String |
提示文字 | 是 | N/A |
title |
String |
Toast标题 | 否 | 空字符串 |
descriptionStyle |
TextStyle |
应用于描述文字的样式 | 否 | TextStyle(color: Colors.black) |
titleStyle |
TextStyle |
应用于标题文字的样式 | 否 | TextStyle(color: Colors.black) |
icon |
IconData |
Toast图标 | 自定义Toast时必需 | N/A |
color |
Color |
自定义Toast背景颜色(应用于背景、图标和侧边栏) | 自定义Toast时必需 | N/A |
width |
double |
自定义Toast宽度 | 否 | 350 |
height |
double |
自定义Toast高度 | 否 | 80 |
iconSize |
double |
图标大小 | 否 | 40 |
iconType |
ICON_TYPE |
图标设计类型(Material设计或Cupertino设计),值为ICON_TYPE.MATERIAL_DESIGN 或ICON_TYPE.CUPERTINO |
否 | ICON_TYPE.MATERIAL_DESIGN |
enableAnimation |
boolean |
是否启用图标的心跳动画 | 否 | true |
layoutOrientation |
ORIENTATION |
Toast布局方向(从左到右或从右到左) | 否 | ORIENTATION.LTR |
animationType |
ANIMATION |
Toast进入动画类型 | 否 | ANIMATION.FROM_BOTTOM |
animationDuration |
Duration |
动画持续时间 | 否 | Duration(milliseconds: 1500) |
toastDuration |
Duration |
Toast显示时长 | 否 | Duration(seconds: 3) |
animationCurve |
Curves |
Toast动画曲线 | 否 | Curves.ease |
position |
MOTION_TOAST_POSITION |
Toast显示位置(顶部、底部、居中) | 否 | MOTION_TOAST_POSITION.BOTTOM |
borderRadius |
double |
定义Toast的圆角半径 | 否 | 20 |
onClose |
Function |
Toast关闭时调用的回调函数 | 否 | null |
注意:
- 创建自定义Toast时,无需使用
iconType
,它在渲染时不会被使用。- 底部Toast不能设置
FROM_TOP
动画,顶部Toast不能设置FROM_BOTTOM
动画。- 居中显示的自定义Toast不会应用动画。
实现示例
成功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);
警告Toast
CustomToast.warning(
title: "Warning Toast",
titleStyle: TextStyle(fontWeight: FontWeight.bold),
description: "This is a Warning",
).show(context);
错误Toast
CustomToast.error(
title: "Error",
titleStyle: TextStyle(fontWeight: FontWeight.bold),
description: "Please enter your name",
).show(context);
信息Toast
CustomToast.info(
title: "Info Toast",
titleStyle: TextStyle(fontWeight: FontWeight.bold),
description: "Example of Info Toast",
).show(context);
删除Toast
CustomToast.delete(
title: "Deleted",
titleStyle: TextStyle(fontWeight: FontWeight.bold),
description: "The item is deleted",
).show(context);
自定义Toast
创建自定义Toast时,需要指定icon
、description
和color
。
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);
右侧布局的Toast
更改Toast布局需要使用layoutOrientation
属性。
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);
顶部显示的Toast
通过position
属性更改Toast显示位置。
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);
居中显示的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);
使用onClose
参数(连续显示两个Toast)
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);
1 回复
更多关于Flutter自定义Toast提示插件customtoastshow的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中,自定义Toast提示插件customtoastshow
可以帮助你创建个性化的Toast消息。以下是如何使用customtoastshow
插件的步骤:
1. 添加依赖
首先,你需要在pubspec.yaml
文件中添加customtoastshow
插件的依赖:
dependencies:
flutter:
sdk: flutter
customtoastshow: ^1.0.0 # 请使用最新版本
然后运行flutter pub get
来获取依赖。
2. 导入插件
在你的Dart文件中导入customtoastshow
插件:
import 'package:customtoastshow/customtoastshow.dart';
3. 使用CustomToastShow
CustomToastShow
提供了多种方法来显示Toast消息。以下是一些常见的用法:
显示简单的Toast消息
CustomToastShow.showToast(
context,
message: '这是一个简单的Toast消息',
duration: Duration(seconds: 2),
);
显示带有图标的Toast消息
CustomToastShow.showToastWithIcon(
context,
message: '这是一个带有图标的Toast消息',
icon: Icons.check_circle,
iconColor: Colors.green,
duration: Duration(seconds: 2),
);
显示自定义样式的Toast消息
CustomToastShow.showCustomToast(
context,
message: '这是一个自定义样式的Toast消息',
backgroundColor: Colors.blue,
textColor: Colors.white,
borderRadius: 10.0,
duration: Duration(seconds: 2),
);
4. 参数说明
context
: 上下文,通常是BuildContext
。message
: 要显示的Toast消息内容。duration
: Toast消息显示的持续时间。icon
: 显示的图标(可选)。iconColor
: 图标的颜色(可选)。backgroundColor
: Toast消息的背景颜色(可选)。textColor
: Toast消息的文本颜色(可选)。borderRadius
: Toast消息的圆角半径(可选)。
5. 示例代码
以下是一个完整的示例代码,展示了如何使用customtoastshow
插件:
import 'package:flutter/material.dart';
import 'package:customtoastshow/customtoastshow.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom Toast Show Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
CustomToastShow.showToast(
context,
message: '这是一个简单的Toast消息',
duration: Duration(seconds: 2),
);
},
child: Text('显示简单Toast'),
),
ElevatedButton(
onPressed: () {
CustomToastShow.showToastWithIcon(
context,
message: '这是一个带有图标的Toast消息',
icon: Icons.check_circle,
iconColor: Colors.green,
duration: Duration(seconds: 2),
);
},
child: Text('显示带图标Toast'),
),
ElevatedButton(
onPressed: () {
CustomToastShow.showCustomToast(
context,
message: '这是一个自定义样式的Toast消息',
backgroundColor: Colors.blue,
textColor: Colors.white,
borderRadius: 10.0,
duration: Duration(seconds: 2),
);
},
child: Text('显示自定义样式Toast'),
),
],
),
),
),
);
}
}