Flutter动态徽章管理插件dynamic_badges的使用

dynamic_badges 是一个用于在Flutter应用中实现Material Design风格徽章的插件。它可以帮助开发者轻松地为按钮、图标等添加动态徽章，以显示未读消息数、通知数等信息。

使用示例

1. 导入包

首先，你需要在项目中导入 dynamic_badges 包：

import 'package:dynamic_badges/dynamic_badges.dart';

2. Counter Example（计数器示例）

以下是一个简单的示例，展示了如何使用 DynamicBadge 来显示一个带有计数器的徽章。在这个例子中，徽章会显示数字 1000，并且点击按钮时不会有任何操作。

class CounterExample extends StatelessWidget {
  const CounterExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DynamicBadge(
      // 设置徽章的计数值
      count: 1000,
      // 徽章包裹的子组件，这里是一个IconButton
      child: IconButton(
        onPressed: () {},  // 点击按钮时的回调函数，当前为空操作
        icon: const Icon(
          Icons.groups_2_outlined,  // 图标
        ),
      ),
    );
  }
}

3. Small Example（小型徽章示例）

如果你只需要一个小的徽章而不需要显示具体的数字，可以使用 DynamicBadge.small 构造函数。以下是一个简单的示例，展示了一个带有电子邮件图标的徽章。

class SmallExample extends StatelessWidget {
  const SmallExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const DynamicBadge.small(
      // 徽章包裹的子组件，这里是一个图标
      child: Icon(
        Icons.email,  // 邮件图标
        size: 48,     // 图标大小
      ),
    );
  }
}

4. 完整的Demo

为了更好地理解如何在实际项目中使用 dynamic_badges，下面是一个完整的示例代码，包含两个页面：一个是带有计数器徽章的页面，另一个是带有小型徽章的页面。

import 'package:flutter/material.dart';
import 'package:dynamic_badges/dynamic_badges.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Badges Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Badges Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => CounterPage()),
                );
              },
              child: Text('Go to Counter Page'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SmallPage()),
                );
              },
              child: Text('Go to Small Badge Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Page'),
      ),
      body: Center(
        child: DynamicBadge(
          count: 1000,
          child: IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.groups_2_outlined,
            ),
          ),
        ),
      ),
    );
  }
}

class SmallPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Small Badge Page'),
      ),
      body: Center(
        child: const DynamicBadge.small(
          child: Icon(
            Icons.email,
            size: 48,
          ),
        ),
      ),
    );
  }
}