Flutter徽章展示插件badge_chain的使用

简介

badge_chain 是一个用于在 Flutter 应用中管理和展示徽章的插件。它参考了 iOS 平台上的 RJBadgeKit 实现，支持多平台（Android、iOS、Web、Windows、macOS 和 Linux），并提供了灵活的配置方式来动态管理应用中的徽章。

特性

• 多平台支持：同时支持主流操作系统。
• 灵活的键路径管理：通过唯一的键路径管理每个徽章的状态。
• 多种徽章样式：支持点状徽章（BadgeDotWidget）和数字徽章（BadgeCountWidget）。
• 强制清除功能：可以强制清除指定键路径下的徽章。

使用步骤

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  badge_chain: ^版本号

然后运行以下命令安装依赖：

flutter pub get

2. 初始化徽章管理器

在应用启动时，初始化徽章管理器并设置初始状态。

import 'package:badge_chain/badge_chain.dart';

class SharePage extends StatefulWidget {
  const SharePage({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _SharePage();
  }
}

class _SharePage extends State<SharePage> {
  final rootHomeKeyPath = "root.home";
  final rootMineKeyPath = "root.mine";
  final rootHomeKeyPathPage1 = "root.home.page1";
  final rootHomeKeyPathPage1Page2 = "root.home.page1.page2";
  final rootHomeKeyPathPage1Page2_1 = "root.home.page1.page2.page2-1";
  final rootHomeKeyPathPage1Page2_2 = "root.home.page1.page2.page2-2";
  final rootMineKeyPathPage1 = "root.mine.page1";

  [@override](/user/override)
  void initState() {
    super.initState();

    // 设置初始徽章状态
    BadgeManager.instance.setBadgeForKeyPath(rootHomeKeyPath);
    BadgeManager.instance.setBadgeForKeyPath(rootMineKeyPath);
    BadgeManager.instance.setBadgeForKeyPath(rootHomeKeyPathPage1);
    BadgeManager.instance.setBadgeForKeyPath(rootHomeKeyPathPage1Page2);
    BadgeManager.instance.setBadgeForKeyPath(rootHomeKeyPathPage1Page2_1, badgeCount: 2);
    BadgeManager.instance.setBadgeForKeyPath(rootHomeKeyPathPage1Page2_2, badgeCount: 3);
    BadgeManager.instance.setBadgeForKeyPath(rootMineKeyPathPage1, badgeCount: 4);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Share"),
      ),
      bottomNavigationBar: Stack(
        children: [
          BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                label: '首页',
                icon: BadgeDotWidget(
                  key: Key(rootHomeKeyPath),
                  keyPath: rootHomeKeyPath,
                  position: BadgePosition.topEnd(top: -12, end: -12),
                  child: const Icon(Icons.add),
                ),
              ),
              BottomNavigationBarItem(
                label: '我的',
                icon: BadgeCountWidget(
                  key: Key(rootMineKeyPath),
                  keyPath: rootMineKeyPath,
                  position: BadgePosition.topEnd(top: -12, end: -12),
                  child: const Icon(Icons.add),
                ),
              ),
            ],
            currentIndex: 1,
            onTap: (index) {},
            showUnselectedLabels: true,
            showSelectedLabels: true,
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
          ),
        ],
      ),
      body: Align(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                /// 跳转页面
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const Page1(),
                  ),
                );
              },
              child: const Text("自定义 view"),
            ),
            BadgeDotWidget(
              key: Key(rootMineKeyPathPage1),
              keyPath: rootMineKeyPathPage1,
              child: ElevatedButton(
                child: Text(rootMineKeyPathPage1),
                onPressed: () {
                  BadgeManager.instance.cleanBadgeForKeyPath(
                    rootMineKeyPathPage1,
                    isForced: true,
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

3. 其他页面示例

Page1

class Page1 extends StatefulWidget {
  const Page1({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _Page1();
  }
}

class _Page1 extends State<Page1> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  final keyPath = "root.home.page1";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page1")),
      body: Align(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BadgeCountWidget(
              key: Key(keyPath),
              keyPath: keyPath,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const Page2()),
                  );
                },
                child: Text(keyPath),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Page2

class Page2 extends StatefulWidget {
  const Page2({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _Page2();
  }
}

class _Page2 extends State<Page2> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  final keyPath = "root.home.page1.page2";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page2")),
      body: Align(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BadgeCountWidget(
              key: Key(keyPath),
              keyPath: keyPath,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const Page3()),
                  );
                },
                child: Text(keyPath),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const Page4()),
                );
              },
              child: const Text("root.home.first.first.second"),
            ),
          ],
        ),
      ),
    );
  }
}

Page3

class Page3 extends StatefulWidget {
  const Page3({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _Page3();
  }
}

class _Page3 extends State<Page3> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  final keyPath = "root.home.page1.page2.page2-1";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page3")),
      body: Align(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BadgeCountWidget(
              key: Key(keyPath),
              keyPath: keyPath,
              child: ElevatedButton(
                onPressed: () {
                  BadgeManager.instance.cleanBadgeForKeyPath(
                    keyPath,
                    isForced: true,
                  );
                },
                child: Text(keyPath),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Page4

class Page4 extends StatefulWidget {
  const Page4({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _Page4();
  }
}

class _Page4 extends State<Page4> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  final keyPath = "root.home.page1.page2.page2-2";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page3")),
      body: Align(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BadgeCountWidget(
              key: Key(keyPath),
              keyPath: keyPath,
              child: ElevatedButton(
                onPressed: () {
                  BadgeManager.instance.cleanBadgeForKeyPath(
                    keyPath,
                    isForced: true,
                  );
                },
                child: Text(keyPath),
              ),
            ),
          ],
        ),
      ),
    );
  }
}