Flutter开发：如何实现按钮圆角化及菜单灰色区域与背景重合？

1. 让设置按钮变为圆角样式 #

给IconButton添加style属性，通过IconButton.styleFrom配置圆角形状：

IconButton(
  onPressed: () {
    setState(() {
      _isRotated = !_isRotated;
    });

    if (settingController.isOpen) {
      settingController.close();
    } else {
      settingController.open();
    }
  },
  icon: AnimatedRotation(
    duration: Duration(milliseconds: 200),
    turns: _isRotated ? 90 : 0,
    curve: Curves.easeInOut,
    child: Icon(
      Icons.settings,
      size: 35,
    ),
  ),
  tooltip: 'setting',
  // 添加圆角样式配置
  style: IconButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0), // 可自定义圆角大小
    ),
    // 可选：添加按钮默认背景色
    backgroundColor: Colors.grey.shade100,
  ),
)

2. 调整菜单灰色区域与白色背景完全重合 #

问题源于MenuItemButton默认内边距和MenuAnchor菜单容器的默认间距，通过以下两步修改：

步骤1：移除MenuItemButton默认内边距，将背景色移至子组件 #

MenuItemButton(
  onPressed: () => setState(() => selectedMenu = SampleItemValue.values[index]),
  style: MenuItemButton.styleFrom(
    padding: EdgeInsets.zero, // 移除默认内边距
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
  child: DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.grey, // 将背景色设置在这里
      borderRadius: BorderRadius.circular(10.0),
    ),
    child: const SizedBox(
      width: 200,
      height: 50,
      child: Center(child: Text('hello')), // 让文字居中显示
    ),
  ),
)

步骤2：设置MenuAnchor菜单容器无内边距 #

MenuAnchor(
  menuStyle: MenuStyle(
    padding: MaterialStateProperty.all(EdgeInsets.zero), // 移除菜单容器默认间距
  ),
  builder: (BuildContext context, settingController, child) => /* 原有IconButton代码 */,
  menuChildren: /* 原有MenuItemButton列表代码 */,
)

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