Flutter修改系统导航栏颜色后跳转页面恢复默认的解决方法

问题出在你只在应用启动时设置了一次系统导航栏样式，Flutter页面跳转时，新页面的UI初始化会覆盖这个设置——尤其是页面包含AppBar这类组件时，默认会沿用系统或主题的样式。

下面是几种可行的解决方式：

1. 全局统一设置（推荐） #

通过MaterialApp的builder属性全局注入样式，确保所有页面构建时都会自动应用导航栏颜色：

MaterialApp(
  builder: (context, child) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.white,
      // 若白色导航栏需要深色图标，可添加以下配置
      // systemNavigationBarIconBrightness: Brightness.dark,
    ));
    return child!;
  },
  home: const YourHomePage(),
  // 其他路由配置...
)

2. 给AppBar统一配置样式 #

如果你的页面都使用AppBar，可以在AppBar的systemOverlayStyle中指定导航栏颜色，保证页面切换时样式一致：

AppBar(
  title: const Text('页面标题'),
  systemOverlayStyle: const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
  ),
)

嫌重复代码麻烦的话，直接封装一个自定义AppBar组件，把样式统一写在里面即可。

3. 无AppBar页面单独设置 #

对于没有AppBar的页面，在页面的initState方法中单独设置样式：

class NoAppBarPage extends StatefulWidget {
  const NoAppBarPage({super.key});

  @override
  State<NoAppBarPage> createState() => _NoAppBarPageState();
}

class _NoAppBarPageState extends State<NoAppBarPage> {
  @override
  void initState() {
    super.initState();
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.white,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(child: Text('无AppBar页面')),
    );
  }
}

注意：如果应用支持深色/浅色模式切换，记得根据当前主题动态调整导航栏颜色，避免图标和背景色对比度不足的问题。

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