Flutter开发Android应用：如何创建带border-radius的圆角按钮？

嘿，我来帮你搞定Flutter里的圆角按钮！其实有好几种简单的实现方式，我给你一一拆解：

1. 使用Material 3的官方按钮组件（推荐） #

现在Flutter默认用Material 3设计系统，ElevatedButton、TextButton、OutlinedButton这些组件都可以通过styleFrom轻松设置圆角，代码简洁还符合官方规范：

示例：带圆角的ElevatedButton #

ElevatedButton(
  onPressed: () {
    // 这里写你的点击逻辑
    print('圆角按钮被点击啦！');
  },
  style: ElevatedButton.styleFrom(
    // 设置圆角半径，这里设为16像素，你可以按需调整
    borderRadius: BorderRadius.circular(16),
    // 额外加一些自定义样式，比如背景色、内边距
    backgroundColor: Colors.blueAccent,
    padding: EdgeInsets.symmetric(horizontal: 28, vertical: 14),
  ),
  child: Text(
    '主操作圆角按钮',
    style: TextStyle(color: Colors.white, fontSize: 16),
  ),
)

示例：带圆角的OutlinedButton（边框按钮） #

如果需要带边框的圆角按钮，用OutlinedButton同样简单：

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    borderRadius: BorderRadius.circular(20),
    // 自定义边框样式
    side: BorderSide(color: Colors.green, width: 2),
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  ),
  child: Text('带边框的圆角按钮'),
)

2. 自定义Container + InkWell（高度定制场景） #

如果需要更复杂的样式（比如渐变背景、自定义阴影、特殊形状），可以用Container配合InkWell来实现，灵活性拉满：

InkWell(
  onTap: () {
    // 点击事件逻辑
  },
  // 这里的圆角要和Container保持一致，不然水波纹会溢出成直角
  borderRadius: BorderRadius.circular(12),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    decoration: BoxDecoration(
      // 渐变背景示例
      gradient: LinearGradient(
        colors: [Colors.purple, Colors.deepPurpleAccent],
      ),
      borderRadius: BorderRadius.circular(12),
      // 自定义阴影
      boxShadow: [
        BoxShadow(
          color: Colors.purple.withOpacity(0.3),
          blurRadius: 6,
          offset: Offset(0, 3),
        )
      ],
    ),
    child: Text(
      '高度定制圆角按钮',
      style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w500),
    ),
  ),
)

小提示 #

一定要让InkWell的borderRadius和内部Container的borderRadius数值一致，这样点击时的水波纹才会是完美的圆角，不会出现边缘溢出的问题。

关于老版本组件的说明 #

如果你还在使用Flutter老版本（Material 2），之前的RaisedButton、FlatButton也可以设置圆角，但这些组件已经被官方废弃，建议尽快迁移到ElevatedButton、TextButton。如果需要临时兼容，写法是这样的：

// 不推荐：RaisedButton已废弃，仅作兼容参考
RaisedButton(
  onPressed: () {},
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('老版本圆角按钮'),
)

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