Flutter弹出提示插件btoast的使用
Flutter弹出提示插件btoast的使用
BToast
BToast 是一个用于Flutter的简单且可定制的Toast库。它提供了一个易于使用的widget,用于在您的应用程序中显示风格为Toast的通知。
功能
- 以简单优雅的方式显示Toast风格的通知。
- 可根据应用需求进行自定义。
- 支持多种类型的Toast:成功、错误、警告、信息等。
- 与现有Flutter项目轻松集成。
安装
$ flutter pub add btoast
使用
显示Toast
import 'package:btoast/btoast.dart';
// Context 和内容是必需的
BToast.show(context, "Toast的内容");
// 其他字段是可选的
BToast.show(
context,
"Toast的内容",
duration: 20, // 持续时间(秒)
theme: Type.WARNING, // 主题类型
isDark: true, // 是否深色模式
title: '测试', // 标题
);
移除所有Toast
import 'package:btoast/btoast.dart';
BToast.hide();
属性
以下是 BToast
widget 的可用属性:
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
context | Context | – | 应用程序的上下文。(必需) |
content | String | – | 设置Toast中的内容。(必需) |
type | String | “SUCCESS” | 设置Toast的类型。可以是 “SUCCESS”、“ERROR”、“WARNING”、“INFO” 或任何其他自定义类型。 |
duration | Number | 5 | 设置Toast显示的持续时间(秒)。默认值为5秒。 |
isDark | Boolean | false | 设置Toast的主题,默认为浅色模式。 |
title | String | “” | 设置Toast的标题。默认为空字符串。 |
设计基于Pine UI
BToast的设计基于Pine UI,这是一个现代且灵活的界面设计系统。Pine UI提供了广泛的一致组件和样式,帮助塑造了BToast的外观和用户体验。
许可证
本项目采用MIT许可证。
完整示例Demo
以下是一个完整的示例代码,展示了如何在Flutter应用中使用BToast插件:
import 'package:btoast/btoast.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
// 显示普通Toast
BToast.show(
context,
"这是一条普通的Toast",
);
},
child: Text('显示普通Toast'),
),
ElevatedButton(
onPressed: () {
// 显示带有标题和自定义主题的Toast
BToast.show(
context,
"这是一条带有标题和自定义主题的Toast",
duration: 10, // 持续10秒
theme: Type.WARNING, // 警告主题
isDark: true, // 深色模式
title: '警告', // 标题
);
},
child: Text('显示带有标题和自定义主题的Toast'),
),
ElevatedButton(
onPressed: () {
// 移除所有Toast
BToast.hide();
},
child: Text('移除所有Toast'),
),
],
),
),
);
}
}
更多关于Flutter弹出提示插件btoast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter弹出提示插件btoast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用btoast
插件来显示弹出提示的示例代码。btoast
是一个流行的Flutter插件,用于显示各种样式的Toast消息。
步骤1:添加依赖
首先,在你的pubspec.yaml
文件中添加btoast
依赖:
dependencies:
flutter:
sdk: flutter
btoast: ^1.0.3 # 请检查最新版本号
然后运行flutter pub get
来获取依赖。
步骤2:配置BToast
在你的主应用文件(通常是main.dart
)中,配置BToast
:
import 'package:flutter/material.dart';
import 'package:btoast/btoast.dart';
void main() {
// 配置BToast
BToast.init(context);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
);
}
}
步骤3:使用BToast显示提示
在你的主屏幕或其他小部件中,你可以使用BToast
来显示提示。例如:
import 'package:flutter/material.dart';
import 'package:btoast/btoast.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BToast Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
BToast.show(
'Hello, World!',
context,
duration: BToastDuration.lengthShort,
alignment: Alignment.center,
);
},
child: Text('Show Short Toast'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
BToast.show(
'This is a long toast message!',
context,
duration: BToastDuration.lengthLong,
alignment: Alignment.bottomCenter,
backgroundColor: Colors.blue,
textColor: Colors.white,
);
},
child: Text('Show Long Toast'),
),
],
),
),
);
}
}
完整代码示例
import 'package:flutter/material.dart';
import 'package:btoast/btoast.dart';
void main() {
BToast.init(context); // 注意:这里实际上需要在MaterialApp的builder中初始化,所以下面会有所调整
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, child) {
// 在这里初始化BToast,因为context在MaterialApp的范围内
BToast.init(context);
return child!;
},
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BToast Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
BToast.show(
'Hello, World!',
context,
duration: BToastDuration.lengthShort,
alignment: Alignment.center,
);
},
child: Text('Show Short Toast'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
BToast.show(
'This is a long toast message!',
context,
duration: BToastDuration.lengthLong,
alignment: Alignment.bottomCenter,
backgroundColor: Colors.blue,
textColor: Colors.white,
);
},
child: Text('Show Long Toast'),
),
],
),
),
);
}
}
请注意,在上面的代码中,BToast.init(context);
被移到了MaterialApp
的builder
方法中,这是因为MaterialApp
提供了一个合适的上下文(context)用于初始化BToast
。
这样,你就可以在你的Flutter应用中使用btoast
插件来显示各种弹出提示了。