前言

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

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

小红点尽管很讨厌，可是为了 KPI，程序员也不得不屈从运营同学的强逼（巴结），得想方法完结。这一篇，来介绍一个徽标（Badge）组件，能够快速搞定应用内的小红点。

Badge 组件

Badge 组件被 Flutter 官方引荐，利用它让小红点的完结十分轻松，只需要2个步骤就能搞定。

  1. 引入依靠

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

badges: ^2.0.3
  1. 将需要运用小红点的组件运用 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。

：觉得有收成请点个赞鼓舞一下！

：收藏文章，便利回看哦！

：谈论交流，相互前进！