改变状态栏的主题颜色

1、在有 AppBar 的情况下，可以借助 AppBar 去设置，比如

return Scaffold(
  appBar: AppBar(
    systemOverlayStyle: SystemUiOverlayStyle.dark,
  ),
  body: ...

或者在主题中全局设置

theme: ThemeData(
  // 白底黑字的 appBar
  appBarTheme: const AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle.dark,
    elevation: 2,
    backgroundColor: Colors.white,
    foregroundColor: Colors.black,
  ),

2、在无 AppBar 的情况下：

默认是由系统决定（当你切换浅色主题/深色主题时自动改变），若要自定义我们可以采取两种方式解决：

手动设置

Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
  return MaterialApp.router(
  // ...

使用 AnnotatedRegion 组件

Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.dark,
    child: MaterialApp.router(
  // ...

底部导航指示器

// 隐藏状态栏与底部导航
SystemChrome.setEnabledSystemUIMode(
// 配合 SystemUiOverlayStyle 的 systemNavigationBarColor: Colors.transparent，可达到底部系统导航透明效果；
// 如果系统导航是3按钮导航，那么可以设置 systemNavigationBarContrastEnforced： false，取消默认的半透明效果。
// 全屏展示
  SystemUiMode.edgeToEdge,
//默认隐藏，若从边缘滑动会显示，过会儿会自动隐藏（安卓，iOS）
//  SystemUiMode.immersiveSticky,
//默认隐藏，若从边缘滑动会显示，不自动隐藏（安卓）
//  SystemUiMode.immersive,
//默认隐藏，点击屏幕任一地方都后会显示，不自动隐藏（安卓，不过在 pixel4 上测试无效）
//SystemUiMode.leanBack,
);

全面屏效果（状态栏+底部导航指示器）

SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.edgeToEdge,
);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
// 沉浸式状态栏（仅安卓）
  statusBarColor: Colors.transparent,
// 沉浸式导航指示器
  systemNavigationBarColor: Colors.transparent,
));
return MaterialApp(...