介绍一个令强迫症讨厌的小红点组件

前言

在 App 的运营中，活跃度是一个重要的指标，日活/月活……为了提高活跃度，就发明了小红点，然后让强迫症用户“没法活”。

小红点虽然很讨厌，但是为了 KPI，程序员也不得不屈从运营同学的逼迫（讨好），得想办法实现。这一篇，来介绍一个徽标（Badge）组件，能够快速搞定应用内的小红点。

Badge 组件

Badge 组件被 Flutter 官方推荐，利用它让小红点的实现非常轻松，只需要2个步骤就能搞定。

引入依赖

在 pubspec.yaml文件种引入相应版本的依赖，如下所示。

badges: ^2.0.3

将需要使用小红点的组件使用 Badge 作为上级组件，设置小红点的位置、显示内容、颜色（没错，也可以改成小蓝点）等参数，示例代码如下所示。

Badge(
  badgeContent: Text('3'),
  position: BadgePosition.topEnd(top: -10, end: -10),
  badgeColor: Colors.blue,
  child: Icon(Icons.settings),
)

position可以设置徽标在组件的相对位置，包括右上角（topEnd）、右下角（bottomEnd）、左上角（topStart）、左下角（bottomStart）和居中（center）等位置。并可以通过调整垂直方向和水平方向的相对位置来进行位置的细微调整。当然，Badge 组件考虑了很多应用场景，因此还有其他的一些参数：

elevation：阴影偏移量，默认为2，可以设置为0消除阴影；
gradient：渐变色填充背景；
toAnimate：徽标内容改变后是否启用动效哦，默认有动效。
shape：徽标的形状，默认是原型，也可以设置为方形，设置为方形的时候可以使用 borderRadius 属性设置圆角弧度。
borderRadius：圆角的半径。
animationType：内容改变后的动画类型，有渐现（fade）、滑动（slide）和缩放（scale）三种效果。
showBadge：是否显示徽标，我们可以利用这个控制小红点的显示与否，比如没有提醒的时候该值设置为 false 即可隐藏掉小红点。

总的来说，这些参数能够满足所有需要使用徽标的场景了。

实例

我们来看一个实例，我们分别在导航栏右上角、内容区和底部导航栏使用了三种类型的徽标，实现效果如下。

其中导航栏的代码如下，这是 Badge 最简单的实现方式了。

AppBar(
  title: const Text('Badge Demo'),
  actions: [
    Badge(
      showBadge: _badgeNumber > 0,
      padding: const EdgeInsets.all(4.0),
      badgeContent: Text(
        _badgeNumber < 99 ? _badgeNumber.toString() : '99+',
        textAlign: TextAlign.center,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 11.0,
        ),
      ),
      position: BadgePosition.topEnd(top: 4, end: 4),
      child: IconButton(
        onPressed: () {},
        icon: const Icon(
          Icons.message_outlined,
          color: Colors.white,
        ),
      ),
    ),
  ],
),

内容区的徽标代码如下，这里使用了渐变色填充，动画形式为缩放，并且将徽标放到了左上角，注意如果使用了渐变色那么会覆盖 badgeColor 指定的背景色。

Badge(
  showBadge: _badgeNumber > 0,
  padding: const EdgeInsets.all(6.0),
  badgeContent: Text(
    _badgeNumber < 99 ? _badgeNumber.toString() : '99+',
    textAlign: TextAlign.center,
    style: const TextStyle(
      color: Colors.white,
      fontSize: 10.0,
    ),
  ),
  position: BadgePosition.topStart(top: -10, start: -10),
  badgeColor: Colors.blue,
  animationType: BadgeAnimationType.scale,
  elevation: 0.0,
  gradient: const LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [
      Colors.red,
      Colors.orange,
      Colors.green,
    ],
  ),
  child: Image.asset(
    'images/girl.jpeg',
    width: 200,
    height: 200,
  ),
),

底部导航栏的代码如下所示，这里需要注意，Badge 组件会根据内容区的尺寸自动调节大小，底部导航栏的显示控件有限，推荐使用小红点（不用数字标识）即可。

BottomNavigationBar(items: [
  BottomNavigationBarItem(
    icon: Badge(
        showBadge: _badgeNumber > 0,
        padding: const EdgeInsets.all(2.0),
        badgeContent: Text(
          _badgeNumber < 99 ? _badgeNumber.toString() : '99+',
          textAlign: TextAlign.center,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 11.0,
          ),
        ),
        position: BadgePosition.topEnd(top: -4, end: -6),
        animationType: BadgeAnimationType.fade,
        child: const Icon(Icons.home_outlined)),
    label: '首页',
  ),
  const BottomNavigationBarItem(
    icon: Icon(
      Icons.star_border,
    ),
    label: '推荐',
  ),
  const BottomNavigationBarItem(
    icon: Icon(
      Icons.account_circle_outlined,
    ),
    label: '我的',
  ),
]),

总结

本篇介绍了使用 Badge 组件实现小红点徽标组件。可以看到，Badge 组件的使用非常简单，相比我们自己从零写一个 Badge 组件来说，使用它可以让我们省时省力、快速地完成运营同学要的小红点。本篇源码已上传至：实用组件相关代码。

我是岛上码农，微信公众号同名。如有问题可以加本人微信交流，微信号：island-coder。

👍🏻：觉得有收获请点个赞鼓励一下！

🌟：收藏文章，方便回看哦！

💬：评论交流，互相进步！