Flutter Widget - Badges 标记
flutter 标记 Widget
2023-09-11 14:19:17 时间
参考文档:https://pub.dev/packages/badges
安装
在 pubspec.yaml
中加入:
dependencies:
badges: ^3.0.2
基本用法
注意!在 Flutter 3.7 中,Badge 小部件被引入到 Material 库中,因此为了避免模棱两可的导入,您需要像这样导入包:
import 'package:badges/badges.dart' as badges;
然后使用 badges.Badge
小部件而不是 Badge
小部件。
badges.Badge(
badgeContent: Text('3'),
child: Icon(Icons.settings),
)
高级用法
import 'package:flutter/material.dart';
import 'package:badges/badges.dart' as badges;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Badges 标记'),
),
body: Center(
child: badges.Badge(
badgeContent: const Text('6',
style: TextStyle(color: Colors.white),
),
position: badges.BadgePosition.topEnd(top: -5, end: -4),
badgeStyle: badges.BadgeStyle(
shape: badges.BadgeShape.square,
badgeColor: Colors.blue,
padding: const EdgeInsets.all(5),
borderRadius: BorderRadius.circular(4),
borderSide: const BorderSide(color: Colors.white, width: 2),
borderGradient: const badges.BadgeGradient.linear(
colors: [Colors.red, Colors.yellow],
begin: Alignment.topCenter,
end: Alignment.bottomCenter
),
elevation: 0
),
badgeAnimation: const badges.BadgeAnimation.fade(
animationDuration: Duration(seconds: 1),
curve: Curves.easeInOut
),
child: const Icon(
Icons.access_time,
size: 40,
color: Colors.orange,
)
)
)
)
);
}
}
相关文章
- flutter系列之:在flutter中使用媒体播放器
- flutter系列之:创建一个内嵌的navigation
- Flutter 错误 Transform‘s input file does not exist: ... artifacts/engine/android-arm/flutter.jar.
- flutter TextField 限制只允许输入数字 小数点
- flutter 层叠布局Stack、Positioned
- flutter 日志输出,Flutter打印日志,flutter log,flutter 真机日志
- Flutter Container 容器以及对齐方式 Alignment
- Flutter移动电商实战 --(42)详细页_UI主页面架构搭建
- Flutter移动电商实战 --(27)列表页_现有Bug修复和完善
- Flutter移动电商实战 --(19)首页_火爆专区商品接口制作
- Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果
- Flutter移动电商实战 --(5)dio基础_引入和简单的Get请求
- Flutter移动电商实战 --(3)底部导航栏制作
- Flutter教程之带有 GoRouter 的 Flutter Navigator 2.0,使用 go_router 包了解 Flutter 中的声明式路由机制(教程含源码)
- 【毕业设计_课程设计】基于Flutter的聊天社交应用
- Flutter & Dart:用数字分组显示大数字
- flutter Web打包