Flutter中如何将BottomAppBar的左上角和右上角设置为圆角

要实现BottomAppBar左上角和右上角的圆角效果，最直接的方式是利用BottomAppBar自带的shape属性，通过RoundedRectangleBorder指定仅顶部左右两个角为圆角即可，无需额外嵌套多余容器。

修改后的完整代码 #

bottomNavigationBar: BottomAppBar(
  color: Colors.green[200]?.withOpacity(0.8),
  // 新增：设置顶部左右圆角
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20), // 可根据需求调整圆角大小
      topRight: Radius.circular(20),
    ),
  ),
  child: Container(
    height: MediaQuery.of(context).size.height/9,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.white),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50))),
          ),
          onPressed: () {},
          child: const Icon(
            Icons.store,
            color: Colors.black87,
            size: 50,
          ),
        ),
        ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.white),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50))),
          ),
          onPressed: () {},
          child: const Icon(
            Icons.home,
            color: Colors.black87,
            size: 50,
          ),
        ),
        ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.white),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50))),
          ),
          onPressed: () {},
          child: const Icon(
            Icons.settings,
            color: Colors.black87,
            size: 50,
          ),
        )
      ],
    ),
  ),
)

备选方案（ClipRRect包裹） #

如果遇到特殊场景（比如需要裁剪更复杂的形状），也可以用ClipRRect包裹BottomAppBar实现圆角：

bottomNavigationBar: ClipRRect(
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(20),
    topRight: Radius.circular(20),
  ),
  child: BottomAppBar(
    color: Colors.green[200]?.withOpacity(0.8),
    child: Container(
      // 原child内容保持不变
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Khoa Nguyễn