Flutter如何实现类似WhatsApp的动态角标 短文本圆形长文本自动变椭圆

核心原理：不需要针对文本长度做分支判断，利用Container的自适应特性即可实现动态适配的角标效果，代码如下：

// 提前计算显示的文本
String badgeText = num > 99 ? "99+" : num > 9 ? "9+" : num.toString();

return Positioned(
  right: 0,
  top: 5,
  child: Container(
    // 最小宽高保持一致，保证短文本时是正圆形
    constraints: const BoxConstraints(
      minWidth: 20,
      minHeight: 20,
    ),
    // 水平内边距，文本变长时自动撑开宽度
    padding: const EdgeInsets.symmetric(horizontal: 4),
    // 圆角设为高度的一半，不管宽高比多少都保持胶囊形状
    decoration: BoxDecoration(
      color: orange,
      borderRadius: BorderRadius.circular(10),
    ),
    // 居中显示文本
    child: Center(
      child: Text(
        badgeText,
        style: TextStyle(
          color: listBackground,
          fontWeight: FontWeight.bold,
          fontSize: 12,
          fontFamily: 'Roboto-Regular',
        ),
      ),
    ),
  ),
);

方案优势 #

• 逻辑更简洁：移除了多分支判断逻辑，所有长度的文本都能自动适配形状，1位文本时因为最小宽高相等、圆角为高度的一半，自动呈现正圆形；文本长度增加时宽度随padding自动撑开，自然变为椭圆形，完全符合预期效果。
• 减少冗余嵌套：去掉了不必要的ClipRRect、CircleAvatar组件，仅用Container即可实现全部效果，降低组件渲染开销。
• 可维护性更高：文本样式、角标尺寸仅需定义一次，后续如果需要调整角标大小或字号，只需要同步修改minHeight、borderRadius（始终为minHeight的1/2）和padding参数即可，不需要同步修改多个分支的代码，维护成本更低。

效果示例：

内容的提问来源于stack exchange，提问作者Itai.S.