[android 15] Status bar text not legible with edge to edge and light theme

Steps to reproduce

flutter create -e flutter_bug
cd flutter_bug && flutter run

I am able to reproduce this bug on a Pixel 7a (android 15) both on the latest stable and master channels.

Expected results

Clearly legible text on the status bar

Actual results

The status bar text is legible only if the theme of the app is dark

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Flutter Doctor output

Doctor output

[✓] Flutter (Channel master, 3.28.0-1.0.pre.122, on EndeavourOS 6.12.4-arch1-1, locale
    en_US.UTF-8)
    • Flutter version 3.28.0-1.0.pre.122 on channel master at /usr/bin/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7877a076a6 (11 hours ago), 2024-12-13 22:46:08 -0500
    • Engine revision a9f7fa8ca6
    • Dart version 3.7.0 (build 3.7.0-243.0.dev)
    • DevTools version 2.41.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /home/damiano/Android/Sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /usr/lib/jvm/java-17-openjdk/bin/java
      This JDK is specified in your Flutter configuration.
      To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 17.0.13+11)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE =
      /var/lib/flatpak/app/com.google.Chrome/current/active/files/extra/chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 18.1.8
    • cmake version 3.31.2
    • ninja version 1.12.1
    • pkg-config version 2.3.0

[✓] Android Studio (version 2024.2)
    • Android Studio at /opt/android-studio/
    • Flutter plugin version 83.0.3
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /opt/android-studio/
    • Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)

[!] Android Studio (version unknown)
    • Android Studio at /opt/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)

[✓] Connected device (3 available)
    • Pixel 7a (mobile) • 37281JEHN00912 • android-arm64  • Android 15 (API 35)
    • Linux (desktop)   • linux          • linux-x64      • EndeavourOS 6.12.4-arch1-1
    • Chrome (web)      • chrome         • web-javascript • Google Chrome 131.0.6778.139

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@ferraridamiano

@ferraridamiano
Can you try as below which seems to resolve the issue ?

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarIconBrightness:
          WidgetsBinding.instance!.platformDispatcher.platformBrightness ==
                  Brightness.light
              ? Brightness.dark
              : Brightness.light,
    ),
  );
  runApp(const MainApp());
}

Thank you. Yes it works, shouldn't this be the default?

@ferraridamiano

@ferraridamiano I am not sure. Do you know if you noticed this in latest version only or was there in previous ones as well ?

This happens only when edge to edge mode is enabled. So, in the previous stable version was ok

@ferraridamiano

@ferraridamiano
I found out that this is specific to Android 15 for which there's a migration guide mentioned in 3.27 announcement.
Please go through https://docs.flutter.dev/release/breaking-changes/default-systemuimode-edge-to-edge and see if it helps in resolving your case.

The migration guide explains how to disable edge to edge mode. Of course it works by disabling this feature. But the problem is with this feature enabled and in the future it will not be possible to disable it

@ferraridamiano

Thanks for the update @ferraridamiano
Check #86248 (comment) and flutter/website#10755 which probably indicates it is known about status bar and navigation bar. Please see if it helps to know why you are seeing the reported behavior.

I tried flutter create with the default counter app doesn't reproduce this. However, just removing the AppBar from the scaffold in the default counter app was enough to make the status bar white and not legible. Weirdly, it flashes black and then back to white.

$ flutter create test_create

from lib/main.dart remove:

-      appBar: AppBar(
-        // TRY THIS: Try changing the color here to a specific color (to
-        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
-        // change color while the other colors stay the same.
-        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        // Here we take the value from the MyHomePage object that was created by
-        // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
-      ),

status_bar.mov

For those of you that use ThemeMode in your app here is a workaround to this problem. The solution is based on the suggestion above.

// Set themeMode
final themeMode = ThemeMode.system; // but also ThemeMode.light or ThemeMode.dark

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarIconBrightness: switch (themeMode) {
      ThemeMode.light => Brightness.dark,
      ThemeMode.dark => Brightness.light,
      ThemeMode.system =>
        WidgetsBinding.instance.platformDispatcher.platformBrightness ==
                Brightness.dark
            ? Brightness.light
            : Brightness.dark
    },
  ),
);

This is not the solution but only a workaround

We believe the statusBarIconBrightness default logic change may need to be changed at the Material/Cupertino design system layer, and not to modify the template.

Will need to investigate where this change needs to happen further.

Sharing from an internal chat:

flutter/packages/flutter/lib/src/rendering/view.dart

Line 389 in e53bd2a

void _updateSystemChrome() {

is where we look up to see if there is any style set to apply it to the view.

This issue is a tricky one, because it is the app bar that sets the style of the status bar by default, here:

flutter/packages/flutter/lib/src/material/app_bar.dart

Line 841 in e53bd2a

SystemUiOverlayStyle _systemOverlayStyleForBrightness(

We could have the Scaffold do it, but then the absence of a Scaffold will present the same issue. The MaterialApp widget could do it, since it should have knowledge of the theme.. but that won't help folks not using MaterialApp.

I don't know if there is a way we could guarantee that we could always catch and handle this as expected, but curious to see what other folks think.

default logic change may need to be changed at the Material/Cupertino design system layer, and not to modify the template.

This is doable! We can alter the MaterialApp and CupertinoApp widgets to set a default style based on the theme brightness, just wondering what we might do when folks are not using these. Or if that is where the expectation ends. :)

Evaluating some cases such as a Cupertino app on Android and Material on iOS to see if the bug shows up by default. And if not, why?

@LouiseHsu

The bug appears in the Cupertino app on Android when there is no CupertinoNavigationBar. @LouiseHsu confirmed the bug does not show up by default in Material and Cupertino on iOS.

Made a doc investigating existing behavior of adopting/using a dark theme on Material here. It explains how Material currently handles using a dark theme. It also outlines the differences in handling between Cupertino and Material as well as some pros and cons of current handling in Material.

This doc can help with making sense of this thread on the PR here.

Fix Status Bar Icon Brightness (#162297)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[android 15] Status bar text not legible with edge to edge and light theme #160305

Steps to reproduce

Expected results

Actual results

Code sample

Flutter Doctor output

13 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[android 15] Status bar text not legible with edge to edge and light theme #160305

Description

Steps to reproduce

Expected results

Actual results

Code sample

Flutter Doctor output

Activity

darshankawar commented on Dec 16, 2024

ferraridamiano commented on Dec 16, 2024

darshankawar commented on Dec 17, 2024

ferraridamiano commented on Dec 17, 2024

darshankawar commented on Dec 18, 2024

ferraridamiano commented on Dec 18, 2024

darshankawar commented on Dec 18, 2024

13 remaining items

jmagman commented on Dec 23, 2024

ferraridamiano commented on Dec 24, 2024

jmagman commented on Jan 7, 2025

Piinks commented on Jan 22, 2025

Piinks commented on Jan 22, 2025

jesswrd commented on Jan 24, 2025

jesswrd commented on Jan 24, 2025

jesswrd commented on Feb 6, 2025

github-actions commented on Feb 24, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions