Flutter 生成 Icon 提示徽标 Widget

最新推荐文章于 2025-09-24 13:49:26 发布

原创

最新推荐文章于 2025-09-24 13:49:26 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #linq

这篇博客介绍了如何在Flutter中创建一个Icon提示徽标Widget，通过使用Stack和Positioned组件，可以轻松地在Icon的四个角添加徽标，以显示附加状态，如定时记录和报警记录的开启状态。

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

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

  /// 生成带上标徽章的 Icon
  /// icondata - IconData 类型，包含 Icon 图标数据
  /// sups - List<IconData?> 类型，包含上标 Icon 图标数据的数组
  /// color - Color 类型，指定上标徽章颜色
  Widget supIcon(IconData icondata, List<IconData?> sups,{color=Colors.yellow}) {