如何在Flutter的CircleAvatar右上角定位Chip组件

我想把Chip组件放在CircleAvatar的右上角，参考预期效果，但当前代码达不到目标，以下是我的代码和效果截图：

SizedBox(
                      width: 50,
                      height: 50,
                      child: Stack(
                        children: [
                          CircleAvatar(
                            radius: 50,
                            backgroundColor: Colors.indigo,
                            child: Stack(
                              children: const [
                                Align(
                                  alignment: Alignment.topRight,
                                  child: Chip(
                                      label: Text('7'),
                                      side: BorderSide(
                                        color: Colors.white,
                                        width: 1,
                                      )),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),

预期效果：

实际效果：

解决方案 #

问题出在你把Chip嵌套在了CircleAvatar的内部Stack里，CircleAvatar的child区域被限制在圆形范围内，导致Chip无法超出圆形显示。正确的做法是将Chip和CircleAvatar放在同一个外层Stack中，通过Positioned精准定位：

SizedBox(
  width: 50,
  height: 50,
  child: Stack(
    children: [
      CircleAvatar(
        radius: 25, // 与外层SizedBox的50尺寸匹配，避免圆形溢出容器
        backgroundColor: Colors.indigo,
      ),
      Positioned(
        top: -5,
        right: -5,
        child: Chip(
          label: Text('7'),
          side: BorderSide(
            color: Colors.white,
            width: 1,
          ),
          padding: EdgeInsets.zero,
          labelPadding: EdgeInsets.symmetric(horizontal: 4, vertical: 2), // 缩小Chip内部间距
        ),
      ),
    ],
  ),
)

关键调整点： #

• 外层Stack同时承载CircleAvatar和Chip，让Chip可以突破圆形范围显示
• 使用Positioned的top和right设为负数，让Chip部分悬浮在CircleAvatar外
• 修正CircleAvatar的radius为25，匹配外层SizedBox的50x50尺寸
• 调整Chip的padding和labelPadding，缩小组件尺寸以贴合预期样式

内容的提问来源于stack exchange，提问作者Boss Nass