升级至Flutter 2.0.2后状态栏图标显示为深色的解决方法咨询

Hey there! I’ve run into this exact issue after upgrading to Flutter 2.x, so let me walk you through how to fix it.

The problem here is that Flutter 2.0 introduced changes to how system UI styles are handled, especially when it comes to status bar icon brightness. Your current AppBarTheme setup might not be working because of priority shifts or missing platform-specific configurations. Here are a few reliable solutions:

1. Fix the Global Theme Configuration (Works for Entire App) #

First, let’s make sure your theme covers both Android and iOS—they handle status bar icons differently:

• For Android: statusBarIconBrightness directly controls the icon color.
• For iOS: statusBarBrightness determines the icon color based on the status bar’s perceived brightness.

Update your ThemeData like this:

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarIconBrightness: Brightness.light, // Android: Light-colored icons
        statusBarBrightness: Brightness.dark, // iOS: Maps to light-colored icons
        // Optional: Set status bar background color if needed
        // statusBarColor: Colors.yourPrimaryColor,
      ),
    ),
  ),
  home: const MyHomePage(title: 'Flutter Demo Home Page'),
);

This ensures the style is applied globally to all AppBars in your app.

2. Force Style on Individual Pages (Higher Priority) #

If the global theme doesn’t take effect (maybe due to local overrides), wrap your Scaffold with AnnotatedRegion to enforce the style for a specific page:

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark,
    ),
    child: Scaffold(
      appBar: AppBar(
        title: const Text('Counter App'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    ),
  );
}

This method takes precedence over global theme settings, so it’s great for one-off page adjustments.

Why Your Original Code Didn’t Work #

Flutter 2.x changed the default priority of system UI styles. Previously, setting statusBarIconBrightness in AppBarTheme was enough, but now you often need to explicitly set both platform-specific properties to ensure consistency across Android and iOS. Also, if your AppBar uses a custom color that Flutter doesn’t recognize as "dark enough", it might fallback to default icon colors.

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