Flutter通知公告插件bulletin的使用
Flutter通知公告插件bulletin的使用
Flutter包用于在您的应用程序中显示通知公告。
显示一些❤️并⭐此仓库
||
特性
- ✅ 显示闪卡
- ✅ 弹出卡片
- ✅ 动画闪卡
- ✅ 完全可自定义
开始使用
在您的项目中包含此插件:
dependencies:
bulletin: <最新版本>
运行 pub get
并获取包。
示例
转到 pub.dev 的示例部分查看完整的示例代码。
在 GitHub 中,前往 example/lib/main.dart
查看完整的示例代码。
import 'package:bulletin/bulletin.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key,
}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text(
"Example",
),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(
"使用bulletin小部件的不同内置属性",
style: TextStyle(
fontSize: 20,
),
),
),
const SizedBox(height: 10),
example1(),
const SizedBox(height: 20),
example2(),
const SizedBox(height: 20),
example3(),
const SizedBox(height: 20),
const Divider(),
const SizedBox(height: 20),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(
"完全自定义的bulletin小部件",
style: TextStyle(
fontSize: 20,
),
),
),
const SizedBox(height: 10),
example4(),
],
),
),
);
}
// 这是一个例子,其中使用了通用图标。
// 持续时间为4秒。
Center example1() {
return Center(
child: Bulletin(
icon: const Icon(
Icons.mic_outlined,
size: 20,
),
gapDuration: const Duration(seconds: 4),
children: [
BulletinItem(
text:
"1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 1 的点击事件被调用");
},
),
BulletinItem(
text:
"2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 2 的点击事件被调用");
},
),
BulletinItem(
text:
"3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 3 的点击事件被调用");
},
),
],
),
);
}
// 这是一个例子,其中在BulletinItem中指定了图标。
Center example2() {
return Center(
child: Bulletin(
backgroundColor: const Color(0xffFFF3D0),
gapDuration: const Duration(seconds: 2),
children: [
BulletinItem(
icon: const Icon(
Icons.music_note,
size: 20,
),
text:
"1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 1 的点击事件被调用");
},
),
BulletinItem(
icon: const Icon(
Icons.mic_sharp,
size: 20,
),
text:
"2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 2 的点击事件被调用");
},
),
BulletinItem(
icon: const Icon(
Icons.masks_rounded,
size: 20,
),
text:
"3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 3 的点击事件被调用");
},
),
],
),
);
}
Center example3() {
return Center(
child: Bulletin(
backgroundColor: const Color.fromARGB(255, 132, 210, 252),
gapDuration: const Duration(seconds: 2),
showCloseButton: false,
children: [
BulletinItem(
icon: const Icon(
Icons.music_note,
size: 20,
),
text:
"1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 1 的点击事件被调用");
},
),
BulletinItem(
icon: const Icon(
Icons.mic_sharp,
size: 20,
),
text:
"2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 2 的点击事件被调用");
},
),
BulletinItem(
icon: const Icon(
Icons.masks_rounded,
size: 20,
),
text:
"3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 3 的点击事件被调用");
},
),
],
),
);
}
Center example4() {
return Center(
child: Bulletin(
backgroundColor: const Color.fromARGB(255, 255, 229, 208),
gapDuration: const Duration(seconds: 3),
textStyle: GoogleFonts.getFont(
"Red Hat Mono",
textStyle: const TextStyle(fontSize: 12),
),
children: [
BulletinItem(
icon: const Icon(
Icons.mic_sharp,
size: 20,
),
text:
"2. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 2 的点击事件被调用");
},
),
BulletinItem(
icon: const Icon(
Icons.music_note,
size: 20,
),
text:
"1. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 1 的点击事件被调用");
},
),
BulletinItem(
icon: const Icon(
Icons.masks_rounded,
size: 20,
),
text:
"3. 这是一则公告。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget elementum libero.",
onTap: () {
debugPrint("BulletinItem 3 的点击事件被调用");
},
),
],
closeButton: Container(
padding: const EdgeInsets.all(4),
margin: const EdgeInsets.all(3),
child: const Icon(
Icons.close_rounded,
size: 12,
color: Colors.black,
),
decoration: const BoxDecoration(
color: Colors.deepOrangeAccent,
borderRadius: BorderRadius.all(Radius.circular(5)),
),
),
),
);
}
}
更多关于Flutter通知公告插件bulletin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter通知公告插件bulletin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter项目中使用bulletin
插件来实现通知公告功能的示例代码。bulletin
是一个用于在Flutter应用中显示通知公告的插件。请注意,实际使用时,你需要确保已经添加了该插件到你的pubspec.yaml
文件中。
首先,确保在pubspec.yaml
中添加依赖:
dependencies:
flutter:
sdk: flutter
bulletin: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get
来安装依赖。
接下来是一个简单的示例代码,展示如何使用bulletin
插件来显示通知公告:
import 'package:flutter/material.dart';
import 'package:bulletin/bulletin.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Bulletin Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final BulletinController _bulletinController = BulletinController();
@override
void initState() {
super.initState();
// 初始化时显示一个公告
_showBulletin();
}
@override
void dispose() {
// 释放资源
_bulletinController.dispose();
super.dispose();
}
void _showBulletin() {
_bulletinController.showBulletin(
context: context,
alignment: Alignment.topCenter,
duration: Duration(seconds: 5),
itemBuilder: (context, index) {
return BulletinItem(
title: Text('这是一个通知公告标题'),
content: Text('这是通知公告的内容部分。'),
trailing: IconButton(
icon: Icon(Icons.close),
onPressed: () {
_bulletinController.dismissBulletin();
},
),
);
},
itemCount: 1,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Bulletin Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
_showBulletin();
},
child: Text('显示公告'),
),
],
),
),
);
}
}
在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个按钮用于触发通知公告的显示。公告包括一个标题、内容和一个关闭按钮。BulletinController
用于控制公告的显示和隐藏。
BulletinController
实例化后,可以通过showBulletin
方法来显示公告。alignment
属性用于设置公告的位置。duration
属性用于设置公告显示的持续时间。itemBuilder
用于构建公告项,可以返回自定义的Widget。itemCount
表示公告项的数量。
运行这个示例,当你点击“显示公告”按钮时,将会看到一个顶部居中的通知公告,5秒后自动消失,你也可以点击关闭按钮来手动关闭公告。
确保你使用的bulletin
插件版本与示例代码兼容,并根据需要进行调整。