Flutter微信角标管理插件wx_badge的使用
Flutter微信角标管理插件wx_badge的使用
自定义徽章小部件，可以轻松展示通知、购物车项目等。
使用
要了解有关wx_badge插件所使用的类和其他参考信息，请参阅API参考文档。
示例代码
WxBadge(
hidden: count == 0,
position: WxBadgePosition.topRight,
offset: const Offset(8, -8),
style: WxBadgeStyle.circle(
borderWidth: 2,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: Colors.red,
padding: const EdgeInsets.all(6),
),
content: Text(
count.toString(),
key: ValueKey(count),
style: const TextStyle(height: 1.15),
),
transition: AnimatedSwitcherTransitions.zoomOut,
child: const WxAvatar(
image: NetworkImage('https://i.pravatar.cc/50?u=2'),
elevation: 3.0,
backgroundColor: Colors.red,
child: Text('Wx'),
),
)
WxBadge(
animated: true,
position: WxBadgePosition.bottomRight,
offset: const Offset(1, 1),
style: WxBadgeStyle.circle(
radius: 5,
borderWidth: 2,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: online ? Colors.green : Colors.red,
padding: const EdgeInsets.symmetric(
horizontal: 5,
vertical: 2,
),
),
child: const WxAvatar.circle(
image: NetworkImage('https://i.pravatar.cc/50?u=20'),
borderWidth: 2,
borderOffset: 3,
borderStyle: BorderStyle.solid,
borderColor: Colors.blue,
backgroundColor: Colors.red,
child: Text('Wx'),
),
)
示例 Demo
在下面的示例中，我们将展示如何使用WxBadge插件来创建一个具有动态计数器的简单应用。该应用包括一个计数器和状态切换按钮。
主程序
import 'package:flutter/material.dart';
import 'package:wx_badge/wx_badge.dart';
import 'package:wx_avatar/wx_avatar.dart';
import 'package:wx_anchor/wx_anchor.dart';
import 'package:wx_text/wx_text.dart';
import 'package:animated_switcher_transitions/animated_switcher_transitions.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'WxBadge Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int count = 0;
bool online = false;
void decrement() {
setState(() {
if (count > 0) count -= 1;
});
}
void increment() {
setState(() {
count += 1;
});
}
void toggleOnline() {
setState(() {
online = !online;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
const SizedBox(height: 40),
const WxText.displayMedium('WxBadge'),
const SizedBox(height: 40),
Wrapper(
title: 'Label',
child: Wrap(
spacing: 35,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
WxBadge(
position: WxBadgePosition.bottomRight,
offset: const Offset(16, 8),
style: WxBadgeStyle(
borderWidth: 2,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: Colors.amber,
foregroundStyle: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
padding: const EdgeInsets.symmetric(
horizontal: 5,
vertical: 2,
),
),
content: const Text(
'NEW',
style: TextStyle(height: 1.2),
),
child: const PhysicalModel(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(5)),
child: SizedBox(
width: 50,
height: 50,
child: Icon(
Icons.music_note_outlined,
color: Colors.white,
),
),
),
),
WxBadge(
position: WxBadgePosition.bottomRight,
offset: const Offset(3, 1),
style: WxBadgeStyle(
width: 20,
height: 20,
border: const StarBorder(
points: 8,
pointRounding: .8,
innerRadiusRatio: .7,
),
borderWidth: 3,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: Colors.blue,
),
content: const Icon(
Icons.check,
color: Colors.white,
),
child: const WxAvatar.circle(
radius: 30,
image: NetworkImage('https://i.pravatar.cc/100?u=6'),
elevation: 3.0,
backgroundColor: Colors.red,
child: Text('Wx'),
),
),
],
),
),
const SizedBox(height: 20),
Wrapper(
title: 'Counter',
child: Wrap(
spacing: 25,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
WxAnchor.circle(
radius: 20,
onTap: decrement,
child: const Icon(Icons.remove_circle_outline),
),
WxBadge(
hidden: count == 0,
position: WxBadgePosition.topRight,
offset: const Offset(8, -8),
style: WxBadgeStyle.circle(
borderWidth: 2,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: Colors.red,
foregroundColor: Colors.white,
padding: const EdgeInsets.all(6),
),
content: Text(
count.toString(),
key: ValueKey(count),
style: const TextStyle(height: 1.15),
),
transition: AnimatedSwitcherTransitions.zoomOut,
child: const WxAvatar(
elevation: 3.0,
image: NetworkImage('https://i.pravatar.cc/50?u=2'),
backgroundColor: Colors.red,
child: Text('Wx'),
),
),
WxBadge(
hidden: count == 0,
position: WxBadgePosition.topRight,
offset: count < 10
? Offset.fromDirection(-.8, 10)
: Offset.fromDirection(-.5, 14),
style: const WxBadgeStyle.stadium(
elevation: 2,
shadows: [
BoxShadow(
color: Colors.green,
spreadRadius: 1,
blurRadius: 7,
offset: Offset(0, 1), // changes position of shadow
),
],
backgroundGradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.blue,
Colors.red,
],
),
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(
horizontal: 5,
vertical: 2,
),
),
transition: AnimatedSwitcherTransitions.slide(
115,
scaleFactor: .9,
),
content: Text(
count.toString(),
key: ValueKey(count),
style: const TextStyle(height: 1.15),
),
child: const Icon(Icons.shopping_cart),
),
WxAnchor.circle(
radius: 20,
onTap: increment,
child: const Icon(Icons.add_circle_outline),
),
],
),
),
const SizedBox(height: 20),
Wrapper(
title: 'Status',
child: Wrap(
spacing: 25,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
WxBadge(
animated: true,
position: WxBadgePosition.bottomRight,
offset: const Offset(3, 1),
style: WxBadgeStyle(
width: 12,
height: 12,
border: online
? const StarBorder(
points: 6,
innerRadiusRatio: .7,
)
: const CircleBorder(),
borderWidth: 2,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: online ? Colors.green : Colors.red,
padding: const EdgeInsets.symmetric(
horizontal: 5,
vertical: 2,
),
),
child: const WxAvatar.circle(
image: NetworkImage('https://i.pravatar.cc/50?u=20'),
borderWidth: 2,
borderOffset: 3,
borderStyle: BorderStyle.solid,
borderColor: Colors.blue,
backgroundColor: Colors.red,
child: Text('Wx'),
),
),
OutlinedButton(
onPressed: toggleOnline,
child: const Text('Toggle Status'),
),
],
),
),
const SizedBox(height: 40),
],
),
),
),
);
}
}
class Wrapper extends StatelessWidget {
const Wrapper({
super.key,
required this.title,
required this.child,
});
final String title;
final Widget child;
[@override](/user/override)
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: WxText.labelLarge(title),
),
SizedBox(
width: 300,
height: 100,
child: Card.outlined(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Center(child: child),
),
),
),
],
);
}
}
更多关于Flutter微信角标管理插件wx_badge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter微信角标管理插件wx_badge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter项目中使用wx_badge插件来管理微信角标的示例代码。这个插件允许你在iOS和Android平台上显示和管理应用的角标（或称为应用图标上的未读消息数）。
首先，确保你已经在pubspec.yaml文件中添加了wx_badge依赖：
dependencies:
flutter:
sdk: flutter
wx_badge: ^最新版本号 # 请替换为当前最新版本号
然后运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中，你可以按照以下步骤来使用wx_badge插件：
1. 导入插件
在你需要使用角标管理的Dart文件中导入wx_badge：
import 'package:wx_badge/wx_badge.dart';
2. 初始化插件
在应用启动时（例如在main.dart中的MyApp类的构造函数或initState方法中），初始化WxBadge插件：
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 初始化 WxBadge 插件
WxBadge.init();
return MaterialApp(
home: HomeScreen(),
);
}
}
3. 设置角标数字
你可以在任何需要的地方调用WxBadge.setBadgeNumber方法来设置角标数字。例如，在点击一个按钮时增加角标数：
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _badgeCount = 0;
void _increaseBadge() {
setState(() {
_badgeCount++;
// 设置角标数字
WxBadge.setBadgeNumber(_badgeCount.toString());
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('微信角标管理示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'当前角标数: $_badgeCount',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _increaseBadge,
child: Text('增加角标'),
),
],
),
),
);
}
}
4. 清除角标数字
你也可以通过调用WxBadge.clearBadge方法来清除角标：
void _clearBadge() {
setState(() {
_badgeCount = 0;
// 清除角标
WxBadge.clearBadge();
});
}
你可以在UI中添加一个按钮来触发这个方法，就像上面的_increaseBadge方法一样。
注意事项
- 在iOS上，显示角标通常需要你的应用具有推送通知权限，并且你可能需要在Xcode中进行一些额外的配置。
- 在Android上，不同厂商的设备可能对角标的支持有所不同，因此效果可能会有所差异。
这个示例代码展示了如何在Flutter中使用wx_badge插件来管理应用的角标数字。根据你的具体需求，你可以进一步扩展和自定义这些功能。
