Flutter中如何将底部导航栏粉色背景改为透明？

要移除底部导航栏的粉色背景并设置为透明，你需要做两处关键修改：

• 给包裹BottomNavigationBar的Container添加透明背景色
• 给BottomNavigationBar本身设置透明背景色

修改后的完整代码如下：

return Scaffold(
  extendBody: true,
  bottomNavigationBar: Container(
    height: 80,
    // 设置Container背景为透明，消除透出的Scaffold粉色
    color: Colors.transparent,
    child: ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(80.0),
        topRight: Radius.circular(80.0),
      ),
      child: BottomNavigationBar(
        // 设置BottomNavigationBar自身背景为透明
        backgroundColor: Colors.transparent,
        selectedItemColor: Colors.amber[800],
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    ),
  ),
  backgroundColor: Color.fromARGB(255, 214, 7, 135),
);

说明 #

• 原代码中Container未设置背景色，会透出父级Scaffold的粉色背景，添加color: Colors.transparent即可消除该粉色区域。
• BottomNavigationBar默认自带背景色，设置backgroundColor: Colors.transparent能让它完全透明，配合已开启的extendBody: true，页面内容会自然延伸到底部导航栏下方，实现预期的透明效果。

底部导航栏粉色背景示意图：

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