如何让Flutter底部导航栏与系统底部导航区域颜色融合？

要让标记1的自定义NavigationBar和标记2的系统导航区域颜色完全一致，只需完成以下两步操作：

1. 同步系统导航栏颜色 #

通过AnnotatedRegion为当前页面单独设置系统导航栏的颜色，使其与你的NavigationBar背景色匹配。如果NavigationBar使用Material3默认配色，直接从主题中获取颜色；如果是自定义颜色，直接使用对应的颜色值即可。

2. 消除底部间隙 #

设置Scaffold的extendBody: true，让自定义底部导航栏延伸覆盖到系统导航区域，避免出现颜色断层。

修改后的MainScaffold代码 #

class MainScaffold extends StatelessWidget {
  final Widget child;
  const MainScaffold({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    // 获取NavigationBar的背景色（默认使用Material3的surfaceVariant）
    final navBarColor = Theme.of(context).colorScheme.surfaceVariant;
    // 如果你的NavigationBar有自定义backgroundColor，替换成对应的颜色：
    // final navBarColor = Colors.yellow; // 示例自定义颜色

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        systemNavigationBarColor: navBarColor,
        // 根据导航栏颜色自动调整图标亮度，确保图标可见
        systemNavigationBarIconBrightness: 
          navBarColor.computeLuminance() > 0.5 ? Brightness.dark : Brightness.light,
      ),
      child: Scaffold(
        extendBody: true, // 关键配置：让底部导航栏延伸到系统区域
        drawer: const MemitDrawer(),
        appBar: const MemitAppBar(),
        body: child,
        floatingActionButton: FloatingActionButton(...),
        bottomNavigationBar: const BottomNavbar(),
      ),
    );
  }
}

额外说明 #

如果你的BottomNavbar中显式设置了NavigationBar的backgroundColor，务必将navBarColor替换为该自定义颜色，确保两者完全一致。

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