Flutter中无法将状态栏颜色改为白色的问题排查

用户代码 #

// ignore_for_file: constant_identifier_names

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:myapp/config/app_config.dart';
import 'package:myapp/themes/themes.dart';
import 'package:url_strategy/url_strategy.dart';

Future main() async {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.white, // status bar color
      statusBarBrightness: Brightness.dark));
  WidgetsFlutterBinding.ensureInitialized();
  const ENV = String.fromEnvironment('ENV', defaultValue: 'dev');
  await AppConfig.configEnv(ENV);
  setPathUrlStrategy();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: GetMaterialApp(
          theme: theme(),
          debugShowCheckedModeBanner: false,
          title: "Myapp",
          home: const HomeScreen()),
    );
  }
}

问题描述 #

尝试将Flutter应用的状态栏颜色设置为白色时未生效，但改为其他颜色可正常生效，询问代码是否存在问题。

问题原因与修复方案 #

1. 初始化绑定顺序错误

WidgetsFlutterBinding.ensureInitialized()必须在调用SystemChrome.setSystemUIOverlayStyle之前执行，否则Flutter无法正确调用系统UI相关API，导致状态栏设置不生效。

2. 跨平台状态栏图标亮度配置缺失

仅设置statusBarBrightness仅对iOS生效，Android需要额外配置statusBarIconBrightness为Brightness.dark——当状态栏为白色时，图标如果是浅色会和背景融为一体，视觉上看起来像是状态栏颜色未生效。

修改后的main函数代码

Future main() async {
  // 先初始化Flutter绑定
  WidgetsFlutterBinding.ensureInitialized();
  // 同时配置iOS和Android的状态栏参数
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.white,
    statusBarBrightness: Brightness.dark, // iOS状态栏图标亮度
    statusBarIconBrightness: Brightness.dark, // Android状态栏图标亮度
  ));
  const ENV = String.fromEnvironment('ENV', defaultValue: 'dev');
  await AppConfig.configEnv(ENV);
  setPathUrlStrategy();
  runApp(const MyApp());
}

额外检查项

如果项目主题文件themes.dart中的theme()方法配置了appBarTheme.systemOverlayStyle，会覆盖全局状态栏设置，需要确保主题内的配置和全局设置一致：

ThemeData theme() {
  return ThemeData(
    // 其他主题配置...
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        statusBarBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.dark,
      ),
    ),
  );
}

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