Flutter徽章展示插件badges的使用
Flutter徽章展示插件badges的使用
简介
badges 是一个用于在Flutter应用中添加徽章（Badge）的插件，可以帮助开发者快速实现带有数字或图标提示的功能。它提供了丰富的自定义选项，包括位置、样式、动画等。以下是关于如何安装和使用该插件的详细介绍。
安装
首先，在你的 pubspec.yaml 文件中添加依赖：
dependencies:
badges: ^3.1.2
注意：从Flutter 3.7开始，Material库中引入了 Badge 组件，为了避免命名冲突，请按照如下方式导入 badges 包：
import 'package:badges/badges.dart' as badges;
然后，在代码中使用时需要加上前缀 badges.，例如 badges.Badge。
基本用法
最简单的使用方法是创建一个 badges.Badge 小部件，并指定 badgeContent 和 child 属性：
badges.Badge(
badgeContent: Text('3'), // 徽章内容
child: Icon(Icons.settings), // 被包裹的小部件
)
高级用法
badges.Badge 提供了许多可配置属性，可以满足更复杂的需求：
badges.Badge(
position: badges.BadgePosition.topEnd(top: -10, end: -12), // 设置徽章位置
showBadge: true, // 是否显示徽章，默认为true
ignorePointer: false, // 是否忽略点击事件，默认为false
onTap: () {}, // 点击徽章时触发的动作
badgeContent: Icon(Icons.check, color: Colors.white, size: 10), // 自定义徽章内容
badgeAnimation: badges.BadgeAnimation.rotation(
animationDuration: Duration(seconds: 1),
colorChangeAnimationDuration: Duration(seconds: 1),
loopAnimation: false,
curve: Curves.fastOutSlowIn,
colorChangeAnimationCurve: Curves.easeInCubic,
), // 动画效果
badgeStyle: badges.BadgeStyle(
shape: badges.BadgeShape.square, // 形状
badgeColor: Colors.blue, // 背景颜色
padding: EdgeInsets.all(5), // 内边距
borderRadius: BorderRadius.circular(4), // 圆角半径
borderSide: BorderSide(color: Colors.white, width: 2), // 边框样式
borderGradient: badges.BadgeGradient.linear(colors: [Colors.red, Colors.black]), // 渐变色边框
badgeGradient: badges.BadgeGradient.linear(
colors: [Colors.blue, Colors.yellow],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
), // 渐变色背景
elevation: 0, // 阴影高度
),
child: Text('Badge'),
)
动画效果
badges 支持多种动画效果，如颜色变化、滑动、淡入淡出、缩放、尺寸改变及旋转等。你可以通过设置 badgeAnimation 属性来选择不同的动画类型。
形状
除了默认的圆形外，还支持方形、Twitter风格和Instagram风格等多种形状。
示例代码
下面是一个完整的示例应用程序，展示了如何结合 badges 插件和其他组件一起工作：
import 'package:badges/badges.dart' as badges;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(useMaterial3: true),
darkTheme: ThemeData.dark(useMaterial3: true),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _cartBadgeAmount = 3;
late bool _showCartBadge;
Color color = Colors.red;
@override
Widget build(BuildContext context) {
_showCartBadge = _cartBadgeAmount > 0;
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: _bottomNavigationBar(),
appBar: AppBar(
leading: badges.Badge(
position: badges.BadgePosition.topEnd(top: 10, end: 10),
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
),
title: Text('Badges Demo'),
actions: <Widget>[
_shoppingCartBadge(),
],
bottom: _tabBar(),
),
body: Column(
children: <Widget>[
_addRemoveCartButtons(),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 可以在这里添加更多带有徽章的组件
],
),
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// 更多带有徽章的组件...
],
),
),
Padding(
padding: const EdgeInsets.only(top: 36, left: 24, right: 24),
child: Column(
children: [
// 消息组件...
],
),
),
],
),
],
),
),
);
}
Widget _shoppingCartBadge() {
return badges.Badge(
position: badges.BadgePosition.topEnd(top: 0, end: 3),
badgeAnimation: badges.BadgeAnimation.slide(),
showBadge: _showCartBadge,
badgeStyle: badges.BadgeStyle(
badgeColor: color,
),
badgeContent: Text(
_cartBadgeAmount.toString(),
style: TextStyle(color: Colors.white),
),
child: IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
);
}
PreferredSizeWidget _tabBar() {
return TabBar(tabs: [
Tab(
icon: badges.Badge(
badgeStyle: badges.BadgeStyle(
badgeColor: Colors.blue,
),
position: badges.BadgePosition.topEnd(top: -14),
badgeContent: Text(
'3',
style: TextStyle(color: Colors.white),
),
child: Icon(
Icons.account_balance_wallet,
color: Colors.grey[800],
),
),
),
Tab(
child: badges.Badge(
badgeStyle: badges.BadgeStyle(
shape: badges.BadgeShape.square,
borderRadius: BorderRadius.circular(5),
padding: EdgeInsets.all(2),
badgeGradient: badges.BadgeGradient.linear(
colors: [
Colors.purple,
Colors.blue,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
position: badges.BadgePosition.topEnd(top: -12, end: -20),
badgeContent: Text(
'NEW',
style: TextStyle(
color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),
),
child: Text(
'music',
style: TextStyle(color: Colors.black),
),
),
),
]);
}
Widget _bottomNavigationBar() {
return BottomNavigationBar(
showSelectedLabels: false,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
label: 'Events',
icon: Icon(Icons.dashboard),
),
BottomNavigationBarItem(
label: 'Messages',
icon: Icon(Icons.notifications),
),
BottomNavigationBarItem(
label: 'Settings',
icon: badges.Badge(
position: badges.BadgePosition.topEnd(),
badgeStyle: badges.BadgeStyle(
padding: EdgeInsets.all(6),
),
badgeContent: Container(
height: 3,
width: 3,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.white),
),
child: Icon(Icons.settings),
),
),
],
);
}
Widget _addRemoveCartButtons() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton.icon(
onPressed: () => setState(() {
_cartBadgeAmount++;
if (color == Colors.blue) {
color = Colors.red;
}
}),
icon: Icon(Icons.add),
label: Text('Add to cart')),
ElevatedButton.icon(
onPressed: _showCartBadge
? () => setState(() {
_cartBadgeAmount--;
color = Colors.blue;
})
: null,
icon: Icon(Icons.remove),
label: Text('Remove from cart')),
],
),
);
}
}
这个例子展示了如何在一个简单的页面中集成 badges 插件，并实现了购物车数量的变化以及底部导航栏上的小红点提示功能。你可以根据实际需求修改和扩展此代码。
更多关于Flutter徽章展示插件badges的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter徽章展示插件badges的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter中使用badges插件来展示徽章的示例代码。badges插件允许你在应用的UI中轻松添加徽章（例如，未读消息计数）。
首先，你需要在pubspec.yaml文件中添加badges依赖：
dependencies:
flutter:
sdk: flutter
badges: ^2.0.0 # 请注意版本号，使用最新版本
然后，运行flutter pub get来安装依赖。
接下来是一个完整的示例代码，展示了如何在Flutter中使用badges插件：
import 'package:flutter/material.dart';
import 'package:badges/badges.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Badges Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _unreadMessages = 5;
void _handlePress() {
setState(() {
_unreadMessages = _unreadMessages == 0 ? 5 : 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Badges Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用BadgeWrapper来包裹图标并显示徽章
BadgeWrapper(
child: IconButton(
icon: Icon(Icons.message),
onPressed: _handlePress,
),
badgeContent: Text('$_unreadMessages'),
badgePosition: BadgePosition.topEnd(withMargin: true),
showBadge: _unreadMessages > 0,
),
SizedBox(height: 20),
// 另一个示例：带有不同颜色和大小的徽章
BadgeWrapper(
child: IconButton(
icon: Icon(Icons.notifications),
onPressed: () {},
),
badgeContent: Text('10+'),
badgeColor: Colors.red,
badgeSize: 20,
badgePosition: BadgePosition.topRight(withMargin: true),
showBadge: true,
),
],
),
),
);
}
}
在这个示例中，我们创建了一个简单的Flutter应用，其中包含了两个图标按钮，每个按钮都使用BadgeWrapper来显示徽章。
- 第一个徽章显示未读消息的数量，点击按钮时，数量会在0和5之间切换。
- 第二个徽章显示一个固定的“10+”文本，并使用了红色的背景和不同的大小。
BadgeWrapper的常用属性包括：
child：需要包裹的Widget（例如图标按钮）。badgeContent：徽章的内容（例如文本）。badgePosition：徽章的位置。badgeColor：徽章的颜色。badgeSize：徽章的大小。showBadge：是否显示徽章。
这个示例展示了如何在Flutter中使用badges插件来创建和管理徽章，以便在UI中提供视觉提示。
