如何调整CircleAvatar与ElevatedButton的布局？请求技术协助

我尝试调整CircleAvatar与ElevatedButton的布局，但未能成功，希望实现以下样式：

目标样式描述：CircleAvatar叠加在ElevatedButton的左上角，部分超出按钮的边界，形成类似徽章的效果
当前样式问题：CircleAvatar与ElevatedButton未实现叠加布局，位置不符合预期

解决方案代码示例： #

通过Stack结合Positioned组件可轻松实现该布局效果，示例代码如下：

Stack(
  clipBehavior: Clip.none, // 允许组件超出Stack范围显示，避免头像被裁剪
  children: [
    // 基础按钮
    ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 16),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        backgroundColor: Colors.blueGrey,
      ),
      child: const Text(
        "按钮文本",
        style: TextStyle(fontSize: 16),
      ),
    ),
    // 叠加的头像组件
    Positioned(
      top: -15, // 向上偏移，让头像顶部超出按钮
      left: -15, // 向左偏移，让头像左侧超出按钮
      child: CircleAvatar(
        radius: 25,
        backgroundColor: Colors.white,
        child: const Icon(Icons.person, size: 30, color: Colors.blueGrey),
      ),
    ),
  ],
)

核心调整说明： #

• Stack用于实现组件的层叠布局，必须设置clipBehavior: Clip.none，否则超出Stack区域的头像部分会被自动裁剪。
• Positioned的top和left属性控制头像的偏移量，可根据实际UI需求调整数值，适配不同的按钮和头像尺寸。
• 可以通过修改CircleAvatar的radius、按钮的padding等参数，进一步优化布局细节。

内容的提问来源于stack exchange，提问作者Kanishka Ramesh