Flutter如何实现边缘整体呈圆润弧度的特殊圆角按钮

不用必须使用CustomPaint就能实现你要的全边缘圆润按钮效果，Flutter自带的组件属性即可满足需求，这种按钮也常被称为药丸形按钮，有两种常用实现方案：

方案1：使用Material按钮组件直接设置形状 #

给ElevatedButton/TextButton等Material系列按钮的shape属性设置为StadiumBorder即可，代码示例：

ElevatedButton(
  onPressed: () {
    // 按钮点击逻辑
  },
  style: ButtonStyle(
    shape: MaterialStateProperty.all(const StadiumBorder()),
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    padding: MaterialStateProperty.all(const EdgeInsets.symmetric(horizontal: 24, vertical: 12)),
  ),
  child: const Text("全圆角按钮", style: TextStyle(color: Colors.white, fontSize: 16)),
)

方案2：自定义Container实现按钮 #

如果需要完全自定义按钮样式，给Container的圆角设置一个远大于按钮高度一半的数值即可，系统会自动适配成全圆角效果，代码示例：

GestureDetector(
  onTap: () {
    // 按钮点击逻辑
  },
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(999),
    ),
    child: const Text("全圆角按钮", style: TextStyle(color: Colors.white, fontSize: 16)),
  ),
)

只有当你需要实现更复杂的按钮效果（比如渐变描边、特殊弧度变形、动态边缘效果等）时，才需要用到CustomPaint手动绘制，普通场景下上述两种方案足够使用，性能也更优。

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