Flutter Widget - Badges 标记

最新推荐文章于 2025-06-10 21:52:10 发布

优小U

最新推荐文章于 2025-06-10 21:52:10 发布

阅读量733

点赞数 1

分类专栏： Flutter 文章标签： flutter android badges

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.youkuaiyun.com/zy1281539626/article/details/129394484

版权

Flutter 专栏收录该内容

12 篇文章

订阅专栏

文章介绍了如何在Flutter应用中使用badges包来创建徽章小部件。通过在pubspec.yaml文件中添加依赖，然后导入并使用badges.Badge，可以设置徽章内容、位置、样式、动画等属性。示例代码展示了基本和高级用法，包括自定义徽章形状、颜色、边框以及渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文档：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});

  @override
  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,
            )
          )
        )
      )
    );
  }
}