Flutter底部导航栏Container圆角处白色背景问题求助

以下是几种可行的解决思路：

1. 统一Scaffold背景色（适用于导航栏作为Scaffold.bottomNavigationBar的情况） #

如果你的底部导航栏是设置在Scaffold的bottomNavigationBar属性中，圆角区域的白色大概率是Scaffold默认的白色背景透出导致的。只需将Scaffold的backgroundColor设置为与页面主体内容的背景色一致即可：

Scaffold(
  backgroundColor: Colors.grey[100], // 改为你的页面背景色
  bottomNavigationBar: Container(
    height: 60,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(30),
        topRight: Radius.circular(30),
      ),
    ),
    // 导航栏内容
  ),
  body: // 页面主体内容
)

2. 使用Stack布局让页面内容覆盖导航栏区域 #

如果页面主体背景是渐变或复杂样式，统一Scaffold背景色不合适，可以用Stack布局，让页面内容占满整个屏幕（包括导航栏的位置），再将导航栏放在上层：

Stack(
  children: [
    // 页面主体内容，设置padding.bottom避开导航栏高度
    Padding(
      padding: const EdgeInsets.only(bottom: 60),
      child: // 你的页面内容
    ),
    // 底部导航栏，定位在屏幕底部
    Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: Container(
        height: 60,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30),
            topRight: Radius.circular(30),
          ),
        ),
        // 导航栏内容
      ),
    ),
  ],
)

这样圆角区域下方是页面主体内容，不会出现突兀的白色。

3. 检查导航栏父容器的背景色 #

如果导航栏嵌套在其他容器中，确认父容器的背景色是否为白色，若有则将父容器的背景色改为透明或与页面背景一致：

// 父容器设置透明背景
Container(
  color: Colors.transparent,
  child: Container(
    height: 60,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(30),
        topRight: Radius.circular(30),
      ),
    ),
    // 导航栏内容
  ),
)

4. 给Container添加clipBehavior（针对子组件溢出情况） #

如果白色是导航栏子组件超出圆角区域导致的，给Container添加clipBehavior: Clip.antiAlias即可裁剪溢出部分：

Container(
  height: 60,
  clipBehavior: Clip.antiAlias,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(30),
      topRight: Radius.circular(30),
    ),
  ),
  // 导航栏内容
)

内容的提问来源于stack exchange，提问作者Febin Johnson