Flutter中如何移除GNav（google_nav_bar）底部导航栏的白色背景

问题场景 #

使用Flutter框架开发移动应用，集成google_nav_bar依赖提供的GNav底部导航栏组件时，功能逻辑运行正常，但导航栏外层存在无法消除的白色矩形背景。
问题效果截图：
GNav白色背景异常截图
原有实现代码：

class NavigationBarScreen extends StatefulWidget {
  const NavigationBarScreen({Key? key}) : super(key: key);

  @override
  State<NavigationBarScreen> createState() => _NavigationBarScreenState();
}

class _NavigationBarScreenState extends State<NavigationBarScreen> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    PageController page_controller = PageController();

    final vals = ['a', 'B', 'c', 'd'];
    int _index = 0;
    final screens = [LoginPage(), SignupPage()];
    return Scaffold(
        body: PageView.builder(
            controller: page_controller,
            itemCount: 4,
            itemBuilder: (context, position) {
              return Container(child: screens[position]);
            }),
        bottomNavigationBar: Padding(
          padding: EdgeInsets.all(8),
          child: ClipRRect(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
              child: Container(
                decoration: const BoxDecoration(
                  //color: Color.fromRGBO(24, 233, 111, 0.35),
                  color: Color.fromRGBO(244, 91, 60, 0.35),
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                ),
                child: GNav(
                  gap: 8,
                  curve: Curves.easeOutExpo,
                  // tab animation curves              curve: Curves.fastOutSlowIn,
                  activeColor: Colors.black,
                  hoverColor: Colors.grey,
                  tabBorderRadius: 6,
                  onTabChange: (index) {
                    setState(() {
                      _index = index;
                    });
                    page_controller.jumpToPage(index);
                  },
                  duration: const Duration(milliseconds: 400),
                  color: const Color(0xEF5350FF),
                  tabs: const [
                    GButton(icon: Icons.home, text: "Mamma"),
                    GButton(icon: Icons.person, text: "Profile"),
                    GButton(icon: Icons.leaderboard, text: "Leaderboard"),
                  ],
                ),
              )),
        ));
  }
}

问题原因 #

白色背景来自Scaffold组件针对bottomNavigationBar插槽的默认材质背景，给导航栏加的8px外边距区域、外层嵌套容器没有覆盖到的插槽区域都会透出这个默认白色，和GNav组件本身样式无关。

修复方案 #

1. 给Scaffold设置extendBody: true属性，让页面内容延伸到底部导航栏区域，切断默认白边的透出逻辑
2. 移除GNav外层多余的ClipRRect、Container嵌套，GNav本身自带backgroundColor、borderRadius样式属性，直接在组件上配置即可，避免额外嵌套产生的边距露白
3. 修正原有代码的隐藏逻辑问题：
   • 把PageController、索引变量、页面列表等状态从build方法移到State类的成员位置，避免每次页面重建都重新初始化状态
   • 补全PageView、GNav对应的页面/tab数量，和设置的itemCount:4匹配，避免运行时索引越界
   • 把系统UI样式设置逻辑移到initState生命周期中，不要放在build方法里重复执行

修复后完整代码 #

class NavigationBarScreen extends StatefulWidget {
  const NavigationBarScreen({Key? key}) : super(key: key);

  @override
  State<NavigationBarScreen> createState() => _NavigationBarScreenState();
}

class _NavigationBarScreenState extends State<NavigationBarScreen> {
  // 状态变量统一移到类成员位置
  final PageController pageController = PageController();
  int _currentIndex = 0;
  // 补全4个页面对应itemCount
  final List<Widget> screens = [
    const LoginPage(),
    const SignupPage(),
    const Placeholder(), // 替换为实际第三个页面
    const Placeholder()  // 替换为实际第四个页面
  ];

  @override
  void initState() {
    super.initState();
    // 系统UI设置放在initState中执行
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 关键属性：消除底部导航栏默认白边
      extendBody: true,
      body: PageView.builder(
          controller: pageController,
          // 可选：禁止左右滑动切换，和底部导航点击逻辑保持一致
          physics: const NeverScrollableScrollPhysics(),
          itemCount: 4,
          itemBuilder: (context, position) {
            return screens[position];
          }
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(8),
        child: GNav(
          // 直接在GNav上配置样式，无需额外嵌套容器
          backgroundColor: const Color.fromRGBO(244, 91, 60, 0.35),
          borderRadius: BorderRadius.circular(12),
          tabBorderRadius: 12,
          gap: 8,
          curve: Curves.easeOutExpo,
          activeColor: Colors.black,
          hoverColor: Colors.grey,
          onTabChange: (index) {
            setState(() {
              _currentIndex = index;
            });
            pageController.jumpToPage(index);
          },
          duration: const Duration(milliseconds: 400),
          color: const Color(0xEF5350FF),
          // 补全4个tab对应itemCount
          tabs: const [
            GButton(icon: Icons.home, text: "Mamma"),
            GButton(icon: Icons.person, text: "Profile"),
            GButton(icon: Icons.leaderboard, text: "Leaderboard"),
            GButton(icon: Icons.settings, text: "Settings"),
          ],
        ),
      )
    );
  }
}

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