求助：如何实现符合预期样式的Floating Action Button

预期设计效果 #

当前实现效果 #

当前代码 #

已尝试的修改及结果 #

添加圆形圆角代码：

使用Radius.circular后，按钮图标仍带有棱角，效果如下：

解决方案 #

方案1：使用Flutter原生FloatingActionButton（推荐）

原生组件默认就是圆形样式，无需手动设置圆角，直接传入图标即可：

FloatingActionButton(
  onPressed: () {
    // 点击事件逻辑
  },
  child: Icon(Icons.add), // 替换为你需要的目标图标
  backgroundColor: Colors.blue, // 匹配预期的背景色
)

方案2：自定义圆形按钮（若需自定义布局）

如果必须用自定义容器实现，需满足以下几点：

1. 容器宽高必须一致，圆角值设为宽高的一半
2. 添加clipBehavior: Clip.antiAlias裁剪超出容器的图标部分
3. 给内部IconButton设置匹配的水波纹半径

示例代码：

Container(
  width: 56,
  height: 56,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(28), // 宽高的一半
  ),
  clipBehavior: Clip.antiAlias,
  child: IconButton(
    icon: Icon(Icons.add, color: Colors.white),
    onPressed: () {},
    splashRadius: 28,
    padding: EdgeInsets.zero,
  ),
)

额外注意：图标本身的问题

如果图标是方形带棱角的样式，即使容器是圆形，图标边角也会露出。这种情况可以：

• 更换为圆角样式的图标
• 用ClipRRect包裹图标进行裁剪：

ClipRRect(
  borderRadius: BorderRadius.circular(28),
  child: Icon(Icons.add),
)

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