Flutter自定义Toast提示插件bot_toast_lego的使用
Flutter自定义Toast提示插件bot_toast_lego的使用
简介
bot_toast_lego
是一个基于 bot_toast
的 Flutter 插件扩展包。它提供了更灵活的方式来展示 Toast 提示信息。
安装
- 如果您的项目尚未创建,请根据 Lego 指南 创建一个新的项目。
- 在项目根目录打开终端,运行以下命令:
june add bot_toast_lego
使用方法
显示简单的文本提示
您可以使用 BotToast.showText
方法来显示简单的文本提示。
// 显示一个简单的文本提示
var cancel = BotToast.showText(
text: "这是一条简单的Toast提示", // 提示文字
);
显示简单通知
您也可以使用 BotToast.showSimpleNotification
方法来显示一个简单的通知。
// 显示一个简单的通知
var cancel = BotToast.showSimpleNotification(
title: "通知标题", // 通知标题
subtitle: "这是通知的详细内容", // 通知内容
);
自定义取消回调
如果您希望在用户点击提示时执行某些操作,可以使用 cancel()
方法来实现自定义逻辑。
// 显示提示并绑定取消回调
var cancel = BotToast.showText(
text: "点击此处关闭提示",
onTap: () {
print("提示已关闭"); // 当用户点击提示时触发的回调
},
);
// 手动调用取消函数
cancel();
常见问题
- 如何自定义提示样式?
bot_toast_lego
提供了丰富的配置选项,您可以查看官方文档了解更多自定义方式。
完整示例代码
以下是一个完整的示例代码,演示了如何使用 bot_toast_lego
来显示不同类型的提示。
import 'package:flutter/material.dart';
import 'package:bot_toast_lego/bot_toast_lego.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
builder: BotToastInit(), // 初始化 BotToast
);
}
}
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void showCustomToast() {
var cancel = BotToast.showText(
text: "这是一个自定义Toast提示",
onTap: () {
print("Toast 已关闭");
cancel(); // 手动关闭提示
},
);
}
void showSimpleNotification() {
var cancel = BotToast.showSimpleNotification(
title: "通知标题",
subtitle: "这是通知的详细内容",
);
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("bot_toast_lego 示例"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: showCustomToast,
child: Text("显示自定义Toast"),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: showSimpleNotification,
child: Text("显示简单通知"),
),
],
),
),
);
}
}
更多关于Flutter自定义Toast提示插件bot_toast_lego的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter自定义Toast提示插件bot_toast_lego的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
bot_toast_lego
是一个基于 bot_toast
的 Flutter 自定义 Toast 提示插件,它提供了更加灵活和强大的 Toast 提示功能。通过 bot_toast_lego
,你可以轻松地自定义 Toast 的样式、位置、动画等。
安装
首先,你需要在 pubspec.yaml
文件中添加 bot_toast_lego
依赖:
dependencies:
flutter:
sdk: flutter
bot_toast_lego: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get
来安装依赖。
基本使用
-
初始化
BotToast
在你的
main.dart
文件中,初始化BotToast
:import 'package:flutter/material.dart'; import 'package:bot_toast/bot_toast.dart'; void main() { runApp(MyApp()); BotToastInit(); // 初始化 BotToast } class MyApp extends StatelessWidget { [@override](/user/override) Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), navigatorObservers: [BotToastNavigatorObserver()], // 添加 BotToast 的导航观察者 home: MyHomePage(), ); } }
-
显示 Toast
使用
BotToast.showText
来显示一个简单的文本 Toast:import 'package:flutter/material.dart'; import 'package:bot_toast/bot_toast.dart'; class MyHomePage extends StatelessWidget { [@override](/user/override) Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('BotToast Demo'), ), body: Center( child: ElevatedButton( onPressed: () { BotToast.showText(text: "Hello, BotToast!"); }, child: Text('Show Toast'), ), ), ); } }
-
自定义 Toast
你可以通过
BotToast.showCustomText
来显示自定义样式的 Toast:BotToast.showCustomText( duration: Duration(seconds: 3), toastBuilder: (cancelFunc) { return Container( padding: EdgeInsets.all(10), decoration: BoxDecoration( color: Colors.black.withOpacity(0.8), borderRadius: BorderRadius.circular(10), ), child: Text( "Custom Toast", style: TextStyle(color: Colors.white), ), ); }, );
-
显示加载中 Toast
使用
BotToast.showLoading
来显示一个加载中的 Toast:BotToast.showLoading(); // 关闭加载中 Toast BotToast.closeAllLoading();
-
显示通知 Toast
使用
BotToast.showNotification
来显示一个通知样式的 Toast:BotToast.showNotification( title: (_) => Text("Notification Title"), subtitle: (_) => Text("This is a notification message."), );
高级功能
bot_toast_lego
还支持更多高级功能,例如:
- 自定义动画:你可以通过
animationDuration
和animationReverseDuration
来设置 Toast 的动画时长。 - 自定义位置:通过
align
参数可以设置 Toast 的显示位置。 - 自定义背景:通过
backgroundColor
参数可以设置 Toast 的背景颜色。 - 自定义点击事件:通过
onTap
参数可以设置 Toast 的点击事件。
示例代码
以下是一个完整的示例代码,展示了如何使用 bot_toast_lego
来显示不同类型的 Toast:
import 'package:flutter/material.dart';
import 'package:bot_toast/bot_toast.dart';
void main() {
runApp(MyApp());
BotToastInit();
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
navigatorObservers: [BotToastNavigatorObserver()],
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BotToast Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
BotToast.showText(text: "Hello, BotToast!");
},
child: Text('Show Text Toast'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
BotToast.showCustomText(
duration: Duration(seconds: 3),
toastBuilder: (cancelFunc) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.8),
borderRadius: BorderRadius.circular(10),
),
child: Text(
"Custom Toast",
style: TextStyle(color: Colors.white),
),
);
},
);
},
child: Text('Show Custom Toast'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
BotToast.showLoading();
Future.delayed(Duration(seconds: 3), () {
BotToast.closeAllLoading();
});
},
child: Text('Show Loading Toast'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
BotToast.showNotification(
title: (_) => Text("Notification Title"),
subtitle: (_) => Text("This is a notification message."),
);
},
child: Text('Show Notification Toast'),
),
],
),
),
);
}
}