Flutter中如何仅隐藏启动页状态栏而不影响其他页面的样式？

问题原因 #

SystemChrome.setEnabledSystemUIOverlays属于全局生效的系统UI配置，启动页调用隐藏状态栏的逻辑后没有主动恢复配置，设置会持续作用到后续所有页面，导致其他页面的自定义状态栏样式失效。

这是问题中提到的状态栏示例：

方案1：跳转前恢复状态栏显示（改动最小，优先使用） #

修改SplashScreen的navigate方法，在执行路由跳转前恢复系统状态栏默认显示即可：

navigate() async {
  // 新增该行，恢复状态栏+底部操作栏显示
  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);
  // Flutter 2.5+推荐使用新版API替代已废弃的方法：
  // SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

  SharedPreferences preferences = await SharedPreferences.getInstance();
  if (preferences.getBool(Preferences.is_logged_in) ?? false) {
    Navigator.of(context).pushReplacementNamed(Routes.welcome);
  } else {
    Navigator.of(context).pushReplacementNamed(Routes.welcome);
  }
}

方案2：单独为页面配置状态栏样式 #

如果不同页面的状态栏样式差异较大，可以在每个页面的initState生命周期中单独配置当前页的状态栏效果，优先级高于全局设置。以NumberScreen为例：

class _NumberScreenState extends State<NumberScreen> {
  @override
  void initState() {
    super.initState();
    // 自定义当前页面的状态栏样式
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
      // 可根据需求调整其他样式属性
    ));
  }

  @override
  Widget build(BuildContext context) {
    int backDropBlur = 30;
    return Scaffold(
      appBar: TransparentAppBar(
        transTitle: "",
        leadingIcon: IconButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          icon: Icon(Icons.chevron_left),
        ),
      ),
      // 其余页面代码保持不变
    );
  }
}

注意事项 #

• 若需要适配安卓、iOS的平台差异，可单独为SystemUiOverlayStyle配置对应平台的属性
• setEnabledSystemUIOverlays在Flutter 2.10及以上版本已被标记为废弃，建议升级SDK后使用setEnabledSystemUIMode相关API，兼容性更好

内容的提问来源于stack exchange，提问作者Nguyen Khac Sam