Flutter 生成 Icon 提示徽标 Widget

       程序中有时为了向用户提供一些附加状态，常在 Icon 的角上用附加图标来展示，如比较常见的数字红点徽标，我们今天并不实现红点徽标，而是用缩小的 Icon 做提示徽标，以展示其它的一些状态，如“蘑菇仪表”app中就有一个 IconButton 按钮左上角和右上角各有一个徽标分别指示定时记录和报警记录已打开。示例图如下：

       Flutter 并没有提供现成的 Icon 提示徽标 Widget，当然可以用第三方库来实现，但用现成的轮子有时也并不一定方便，其实实现这个功能非常简单。只要用 Stack 和 Positioned 就可以轻松搞定，代码如下：

  /// 生成带上标徽章的 Icon
  /// icondata - IconData 类型，包含 Icon 图标数据
  /// sups - List 类型，包含上标 Icon 图标数据的数组
  /// color - Color 类型，指定上标徽章颜色
  Widget supIcon(IconData icondata, List sups,{color=Colors.yellow}) {
    List _pos = [Icon(icondata)];
    for (var i = 0; i < sups.length; i++) {
      if (sups[i] != null) {
        _pos.add(
          Positioned(
              top: i == 0 || i == 1 ? -6.0 : null,
              left: i == 0 || i == 3 ? -6.0 : null,
              right: i == 1 || i == 2 ? -6.0 : null,
              bottom: i == 2 || i == 3 ? -6.0 : null,
              child: Icon(
                sups[i],
                size: 16,
                color: color,
              )),
        );
      }
    }

    return Stack(
        clipBehavior: Clip.none,
        children: _pos
        );
  }

代码很简单，却实现了四个角的徽标。调用代码也比较简单，这里就不熬术了。