Flutter中如何扩展容器/主体覆盖底部栏以消除白色边角？

你遇到的问题核心是嵌套的Scaffold/MaterialApp破坏了extendBody的作用逻辑，加上页面结构层次错误，导致body无法延伸覆盖底部导航栏的圆角区域。以下是具体解决步骤：

问题根源 #

你在DietPage中单独返回了MaterialApp和Scaffold，而底部导航栏所在的根组件也是一个独立的MaterialApp+Scaffold。这种嵌套结构会让外层Scaffold的extendBody属性无法穿透到内层页面，因为内层Scaffold会创建自己的独立布局上下文，阻断了body的延伸逻辑。

修复步骤 #

1. 重构页面组件：移除嵌套的Scaffold/MaterialApp #

修改DietPage的代码，不要返回完整的Scaffold，只保留页面内容的Widget：

class _DietPageState extends State<DietPage> {
  @override
  Widget build(BuildContext context) {
    // 直接返回页面内容容器，不再嵌套Scaffold/MaterialApp
    return Container(
      color: AppColors.vitgreen,
      // 这里添加你的页面其他内容（比如ListView、Column等）
    );
  }
}

2. 确保根Scaffold的extendBody属性正确配置 #

在包含底部导航栏的根Scaffold中，确认extendBody: true已设置，同时保证body区域是页面内容Widget（而非嵌套的Scaffold）：

return MaterialApp(
  home: Scaffold(
    extendBodyBehindAppBar: false,
    backgroundColor: AppColors.Primebg,
    appBar: appbar,
    // 关键：开启extendBody让body延伸至底部导航栏下方
    extendBody: true,
    // _pages里存放的是像DietPage这样的内容Widget，不是完整Scaffold
    body: _pages[_selectedIndex],
    bottomNavigationBar: Container(
      decoration: BoxDecoration(
        color: AppColors.Primebg,
        border: Border.all(color: AppColors.line, width: 2),
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10), topRight: Radius.circular(10)),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
        child: GNav(
          onTabChange: (index) {
            _navigateBottomBar(index);
          },
          haptic: true,
          tabBorderRadius: 50,
          tabActiveBorder: Border.all(color: AppColors.litegrey, width: 1),
          curve: Curves.easeInOutQuart,
          duration: Duration(milliseconds: 100),
          gap: 5,
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          iconSize: 30,
          color: AppColors.darkgrey,
          activeColor: AppColors.whiteText,
          tabBackgroundColor: AppColors.vitred,
          // 补充完整GNav的其他配置项
        ),
      ),
    ),
  ),
);

3. 验证效果 #

完成上述修改后，根Scaffold的body会延伸至底部导航栏的圆角下方，页面内容的背景色会填充原本的白色边角区域，彻底解决问题。

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