Flutter轻量级提示插件mini_toast的使用
Flutter轻量级提示插件mini_toast的使用
MiniToast 🍞
一个轻量级、灵活的Flutter通知库，自动处理不同内容大小，并提供平滑的动画效果。MiniToast使在Flutter应用中显示美观、堆叠的通知变得简单。
✨ 特性
- 🎯 智能定位：自动处理不同的吐司高度并正确堆叠
- 🎨 带有图标的变体：
- 🟢 成功吐司带对勾图标
- 🔴 错误吐司带取消图标
- 🔵 信息吐司带信息图标
- 📐 灵活的放置：
- 垂直：顶部或底部
- 水平：左、中、右
- ⚡ 平滑动画：
- 渐显/渐隐
- 可定制的滑动方向
- 🛠️ 丰富的自定义：
- 持续时间控制
- 自定义文本样式
- 图标颜色
- 间距和边距
- 阴影和圆角
- 📦 简单的集成：只需包装你的应用并开始显示吐司
📦 安装
在 pubspec.yaml 中添加 MiniToast：
dependencies:
mini_toast: ^1.0.0
🚀 使用
1. 包装你的应用
首先，使用 ToastOverlayWrapper 包装你的应用：
void main() {
runApp(
ToastOverlayWrapper(
child: MaterialApp(
home: MyHomePage(),
),
),
);
}
2. 显示吐司
使用 MiniToast.instance 来显示吐司：
// 成功吐司
MiniToast.instance.show(
message: '操作成功完成！',
variant: ToastVariant.success,
);
// 错误吐司
MiniToast.instance.show(
message: '出错了',
variant: ToastVariant.error,
);
// 信息吐司
MiniToast.instance.show(
message: '收到新消息',
variant: ToastVariant.info,
);
// 自定义吐司
MiniToast.instance.showCustom(
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(8),
),
builder: (context) => Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.star, color: Colors.white),
const SizedBox(width: 8),
Text(
'自定义吐司！',
style: TextStyle(color: Colors.white),
),
],
),
displayDuration: Duration(seconds: 5),
);
3. 自定义外观
配置全局吐司设置：
MiniToast.instance.setConfig(
MiniToastConfig(
verticalPosition: ToastVerticalPosition.bottom,
horizontalPosition: ToastHorizontalPosition.center,
displayDuration: const Duration(seconds: 3),
animationDuration: const Duration(milliseconds: 300),
toastSpacing: 8.0,
textStyle: const TextStyle(fontSize: 16),
iconColor: Colors.white,
// ... 其他自定义选项
),
);
🎯 完整示例
import 'package:flutter/material.dart';
import 'package:mini_toast/mini_toast.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ToastOverlayWrapper(
child: MaterialApp(
title: 'MiniToast Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 可配置的吐司设置
ToastVerticalPosition _verticalPosition = ToastVerticalPosition.bottom;
ToastHorizontalPosition _horizontalPosition = ToastHorizontalPosition.center;
ToastSlideDirection _slideDirection = ToastSlideDirection.bottom;
final Duration _displayDuration = const Duration(seconds: 3);
Duration _animationDuration = const Duration(milliseconds: 300);
double _fontSize = 16.0;
@override
void initState() {
super.initState();
_updateToastConfig();
}
void _updateToastConfig() {
MiniToast.instance.setConfig(
MiniToastConfig(
textStyle: TextStyle(
fontSize: _fontSize,
fontWeight: FontWeight.w500,
),
horizontalPosition: _horizontalPosition,
verticalPosition: _verticalPosition,
slideDirection: _slideDirection,
displayDuration: _displayDuration,
animationDuration: _animationDuration,
contentPadding: const EdgeInsets.all(12),
toastSpacing: 10,
margin: const EdgeInsets.all(16),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(150),
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MiniToast 功能演示'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildCard(
title: '位置设置',
children: [
_buildDropdown<ToastVerticalPosition>(
label: '垂直位置',
value: _verticalPosition,
items: ToastVerticalPosition.values,
onChanged: (value) {
setState(() {
_verticalPosition = value!;
_updateToastConfig();
});
},
),
_buildDropdown<ToastHorizontalPosition>(
label: '水平位置',
value: _horizontalPosition,
items: ToastHorizontalPosition.values,
onChanged: (value) {
setState(() {
_horizontalPosition = value!;
_updateToastConfig();
});
},
),
],
),
_buildCard(
title: '动画设置',
children: [
_buildDropdown<ToastSlideDirection>(
label: '滑动方向',
value: _slideDirection,
items: ToastSlideDirection.values,
onChanged: (value) {
setState(() {
_slideDirection = value!;
_updateToastConfig();
});
},
),
_buildSlider(
label: '动画持续时间',
value: _animationDuration.inMilliseconds.toDouble(),
min: 100,
max: 1000,
divisions: 9,
onChanged: (value) {
setState(() {
_animationDuration =
Duration(milliseconds: value.round());
_updateToastConfig();
});
},
),
],
),
_buildCard(
title: '样式设置',
children: [
_buildSlider(
label: '字体大小',
value: _fontSize,
min: 12,
max: 24,
divisions: 12,
onChanged: (value) {
setState(() {
_fontSize = value;
_updateToastConfig();
});
},
),
],
),
const SizedBox(height: 24),
_buildButton(
label: '显示成功吐司',
color: Colors.green,
onPressed: () => MiniToast.instance.show(
message: '成功消息，当前设置',
variant: ToastVariant.success,
),
),
_buildButton(
label: '显示错误吐司',
color: Colors.red,
onPressed: () => MiniToast.instance.show(
message: '错误消息，当前设置',
variant: ToastVariant.error,
),
),
_buildButton(
label: '显示警告吐司',
color: Colors.orange,
onPressed: () => MiniToast.instance.show(
message: '警告消息，当前设置',
variant: ToastVariant.warning,
),
),
_buildButton(
label: '显示多个吐司',
onPressed: () {
MiniToast.instance.show(
message: '第一个吐司\n多行文本',
variant: ToastVariant.info,
displayDuration: const Duration(seconds: 5),
iconColor: Colors.deepPurple,
);
Future.delayed(const Duration(milliseconds: 200), () {
MiniToast.instance.show(
message: '第二个吐司',
variant: ToastVariant.success,
displayDuration: const Duration(seconds: 4),
iconColor: Colors.lightGreen,
);
});
Future.delayed(const Duration(milliseconds: 400), () {
MiniToast.instance.showCustom(
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(8),
),
builder: (context) => Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.star, color: Colors.white),
const SizedBox(width: 8),
Text(
'自定义吐司！',
style: TextStyle(color: Colors.white),
),
],
),
displayDuration: Duration(seconds: 5),
);
});
},
),
],
),
),
);
}
Widget _buildCard({required String title, required List<Widget> children}) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style:
const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 16),
...children,
],
),
),
);
}
Widget _buildDropdown<T>({
required String label,
required T value,
required List<T> items,
required ValueChanged<T?> onChanged,
}) {
return DropdownButtonFormField<T>(
value: value,
decoration: InputDecoration(labelText: label),
items: items
.map((item) =>
DropdownMenuItem(value: item, child: Text(item.toString())))
.toList(),
onChanged: onChanged,
);
}
Widget _buildSlider({
required String label,
required double value,
required double min,
required double max,
required int divisions,
required ValueChanged<double> onChanged,
}) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label),
Slider(
value: value,
min: min,
max: max,
divisions: divisions,
label: value.round().toString(),
onChanged: onChanged,
),
],
);
}
Widget _buildButton({
required String label,
Color color = Colors.blue,
required VoidCallback onPressed,
}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: color,
foregroundColor: Colors.white,
),
child: Text(label),
),
);
}
}
🔧 配置选项
MiniToastConfig 类提供了以下自定义选项：
textStyle: 吐司消息的自定义文本样式verticalPosition: 顶部或底部放置horizontalPosition: 左、中、右对齐slideDirection: 动画滑动方向displayDuration: 吐司显示的时间animationDuration: 显示/隐藏动画的时长toastSpacing: 堆叠吐司之间的间距margin: 吐司定位的边缘边距boxShadow: 可定制的阴影效果borderRadius: 圆角contentPadding: 内部填充iconColor: 变体图标的颜色
🧾 许可证
该项目采用 Apache License 许可。
🤝 贡献
发现错误或有新的功能想法？请随时 打开问题 或提交拉取请求。
更多关于Flutter轻量级提示插件mini_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter轻量级提示插件mini_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用mini_toast插件来实现轻量级提示的示例代码。
1. 添加依赖
首先，在你的pubspec.yaml文件中添加mini_toast的依赖：
dependencies:
flutter:
sdk: flutter
mini_toast: ^3.0.0 # 请确保使用最新版本，可以在pub.dev上查找最新版本号
然后运行flutter pub get来安装依赖。
2. 导入并使用MiniToast
在你的Dart文件中导入mini_toast包，并初始化MiniToast实例。接下来，你可以使用MiniToast来显示提示信息。
import 'package:flutter/material.dart';
import 'package:mini_toast/mini_toast.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final MiniToast miniToast = MiniToast();
@override
void initState() {
super.initState();
// 初始化MiniToast
miniToast.init(context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter MiniToast Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
// 显示普通提示
miniToast.showToast(
msg: "这是一个普通提示",
gravity: ToastGravity.BOTTOM, // 提示位置
backgroundColor: Colors.blue,
textColor: Colors.white,
duration: Toast.LENGTH_SHORT, // 显示时长
);
},
child: Text('显示普通提示'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 显示成功提示
miniToast.showToast(
msg: "操作成功",
gravity: ToastGravity.CENTER,
image: AssetImage("assets/success.png"), // 可选，显示图标
backgroundColor: Colors.green,
textColor: Colors.white,
duration: Toast.LENGTH_LONG,
);
},
child: Text('显示成功提示'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 显示错误提示
miniToast.showToast(
msg: "操作失败",
gravity: ToastGravity.TOP,
backgroundColor: Colors.red,
textColor: Colors.white,
animationType: ToastAnimation.FADE, // 动画类型
duration: Toast.LENGTH_SHORT,
);
},
child: Text('显示错误提示'),
),
],
),
),
);
}
}
3. 资源文件（可选）
如果你打算在提示中使用图标，比如上面的成功提示中的success.png，你需要将图标文件添加到你的项目资源中。将图标文件放在assets文件夹中，并在pubspec.yaml中声明：
flutter:
assets:
- assets/success.png
总结
以上代码展示了如何在Flutter项目中使用mini_toast插件来显示不同类型的轻量级提示。你可以根据需要调整提示的文本、位置、背景颜色、动画效果等参数。希望这个示例对你有所帮助！
