Flutter SystemUiOverlayStyle does not work with some configurations on Android

I'm using AnnotatedRegion widget to change status bar color. I expect the status bar color to switch between white and transparent. But nothing happens. Check _getSystemUiOverlayStyle method for how it's being done.

I tried changing the content of the _getSystemUiOverlayStyle method to the following, and then it successfully changes the color.

 SystemUiOverlayStyle _getSystemUiOverlayStyle(BuildContext context) {
    if (isTransparentStatusBar) {
      return SystemUiOverlayStyle.dark.copyWith(
        statusBarColor: Colors.transparent,
      );
    } else {
      return SystemUiOverlayStyle.light.copyWith(
        statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
      );
    }
  }

Is this a bug or am I missing something?

Sample App

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isTransparentStatusBar = false;

  void _toggleState() =>
      setState(() => isTransparentStatusBar = !isTransparentStatusBar);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: false,
        child: AnnotatedRegion<SystemUiOverlayStyle>(
          value: _getSystemUiOverlayStyle(context),
          child: Center(
            child: Stack(
              children: [
                Container(
                  color: Theme.of(context).scaffoldBackgroundColor,
                ),
                Center(
                  child: ElevatedButton(
                    onPressed: () => _toggleState(),
                    child:
                        Text(isTransparentStatusBar ? "Transparent" : "Opaque"),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  SystemUiOverlayStyle _getSystemUiOverlayStyle(BuildContext context) {
    if (isTransparentStatusBar) {
      return SystemUiOverlayStyle.light.copyWith(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
      );
    } else {
      return SystemUiOverlayStyle.light.copyWith(
        statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
      );
    }
  }
}

Flutter doctor

[✓] Flutter (Channel stable, 1.22.6, on Mac OS X 10.15.4 19E287 darwin-x64, locale en-IN)
    • Flutter version 1.22.6 at /Users/abhaysood/flutter
    • Framework revision 9b2d32b605 (4 weeks ago), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/abhaysood/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio 2.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.10.1

[✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin installed
    • Dart plugin version 203.6912

@abhaysood

@abhaysood
Check out this SO link and see if it answers your question. Also, provide flutter doctor -v

Related #24893, #27776

@darshankawar

Check out this SO link and see if it answers your question. Also, provide flutter doctor -v

@darshankawar Updated the issue with flutter doctor -v output and I checked the SO answers, I'm already using AnnotatedRegion as suggested in the accepted answer.

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.6, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-IN)
    • Flutter version 1.22.6 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 9b2d32b605 (4 weeks ago), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.53.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (1 available)
    • SM A260G (mobile) • 5200763ebcfa861f • android-arm • Android 8.1.0 (API
      27)

! Doctor found issues in 1 category.

have you tried moving that block up before the scaffold?

Mine way is working both the workaround for transparent sytsemUIs and the edge-to-edge as well. I had to revert to some native hacking to couple it to the system chrome API calls

the repo is here https://github.com/fredgrott/base_river

I'm also using AnnotatedRegion, with SystemUiOverlayStyle mainly to change the systemNavigationBar bar colors, opcaity etc. Before I was able to get everything as desired, but I now noticed an issue where if I do it as before and just no use (null) for all statusBar settings that are already set by the SystemUiOverlayStyle in AppBarTheme and just set things for systemNavigationBar in the AnnotatedRegion it no longer works.

Everything worked OK earlier, however it occurred to me, that was on Android 10 (API 29).

Now on Android 11 (API 30), when I do the same, the statusBarIconBrightness is not kept from its AppBarTheme. The AnnotatedRegion usage, even if its SystemUiOverlayStyle props for all status bar settings are null, changes the status bars icon brightness to the wrong value.

So I tried setting the statusBarIconBrightness to its right value in AnnotatedRegionusage too, but it does not help. No props in it will set them to the correct brightness. This seems to only happen on API 30. On levels 29 and lower, things seem to work OK as before.

I also tried using the newer SystemUiOverlayStyle prop systemStatusBarContrastEnforced, but it had no impact on the issue.

I will probably make a simple repro case to verify this finding, and then post it as separate issue.

For reference, I made a reproduction sample of my mentioned issue above in this issue: #90098.

I will post a more detailed version of it is a new separate issue. While it certainly is related to both this and above linked issue, it is imo a separate case.

EDIT: Made an own issue of it here: #100027

To update this issue, there was a bug -- there were some missing window flags checks that are needed to change the status bar color. This PR should fix it when it lands!

@camsim99

@camsim99 The PR has landed, can we close this issue?

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

Flutter SystemUiOverlayStyle does not work with some configurations on Android #76384

Sample App

Flutter doctor

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Flutter SystemUiOverlayStyle does not work with some configurations on Android #76384

Description

Sample App

Flutter doctor

Activity

darshankawar commented on Feb 22, 2021

darshankawar commented on Feb 22, 2021

abhaysood commented on Feb 22, 2021

darshankawar commented on Feb 23, 2021

fredgrott commented on Apr 14, 2021

fredgrott commented on Apr 15, 2021

rydmike commented on Mar 12, 2022

rydmike commented on Mar 12, 2022

camsim99 commented on Mar 23, 2022

bleroux commented on May 25, 2022

github-actions commented on Jun 9, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions