如何在Stack组件中裁剪CircleAvatar上方的TextButton？

当然有其他方法，给你两种简单的实现方式：

• 使用BorderRadius实现顶部凹弧
  你的CircleAvatar直径为200（radius:100），底部Container宽度同样是200，直接给Container的顶部设置半圆圆角，就能完美贴合圆形头像的底部边缘，代码修改如下：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    CircleAvatar(
      radius: 100,
      foregroundImage: _pickedImage == null ? null : FileImage(_pickedImage!),
      child: const Icon(
        Icons.person_outlined,
        size: 40,
      ),
    ),
    Container(
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.8),
        borderRadius: const BorderRadius.vertical(
          top: Radius.circular(100),
        ),
      ),
      width: 200,
      height: 50,
      child: TextButton.icon(
        onPressed: _pickImage,
        icon: const Icon(Icons.image),
        label: const Text("Upload Image"),
      ),
    ),
  ],
);

• 使用ClipPath配合内置ShapeBorder
  也可以通过ClipPath结合RoundedRectangleBorder裁剪Container的顶部形状，效果和上面一致：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    CircleAvatar(
      radius: 100,
      foregroundImage: _pickedImage == null ? null : FileImage(_pickedImage!),
      child: const Icon(
        Icons.person_outlined,
        size: 40,
      ),
    ),
    ClipPath(
      clipper: ShapeBorderClipper(
        shape: RoundedRectangleBorder(
          borderRadius: const BorderRadius.vertical(
            top: Radius.circular(100),
          ),
        ),
      ),
      child: Container(
        color: Colors.white.withOpacity(0.8),
        width: 200,
        height: 50,
        child: TextButton.icon(
          onPressed: _pickImage,
          icon: const Icon(Icons.image),
          label: const Text("Upload Image"),
        ),
      ),
    ),
  ],
);

这两种方法都无需自定义CustomClipper，用Flutter内置组件和属性就能实现，第一种方案更简洁高效。

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