Skip to content

systemNavigationBarIconBrightness: Brightness.dark resets to light onResume. #21265

Closed
Closed
systemNavigationBarIconBrightness: Brightness.dark resets to light onResume.#21265
Labels
P2Important issues not at the top of the work lista: layoutSystemChrome and Framework's Layout Issuesfound in release: 1.22Found to occur in 1.22found in release: 1.26Found to occur in 1.26frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesplatform-androidAndroid applications specificallyr: solvedIssue is closed as solved

Description

@iamarnas
iamarnas
opened on Aug 31, 2018

systemNavigationBarIconBrightness: Brightness.dark resets to light onResume.

This bug still live from beta 0.5.1 now I testing master 0.7.4 and i have same problem.

This is my code:

SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Colors.white,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarIconBrightness: Brightness.dark,
    ),
  );

I have fixed it with this code below, but i think it should work with default code which is above.

void _updateNavigationBarIconBrightness() async {
  SystemChannels.lifecycle.setMessageHandler((msg) {
    if (msg == AppLifecycleState.resumed.toString()) {
      SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle.light.copyWith(
          systemNavigationBarColor: Colors.white,
          systemNavigationBarIconBrightness: Brightness.dark,
        ),
      );
    }
  });
}

Activity

  1. zoechi
    changed the title [-]systemNavigationBarIconBrightness: Brightness.dark resets to light onResum.[/-] [+]systemNavigationBarIconBrightness: Brightness.dark resets to light onResume.[/+] on Aug 31, 2018

  2. zoechi commented on Aug 31, 2018

    @zoechi
    zoechi
    on Aug 31, 2018
    Contributor

    Please add the output of flutter doctor -v.

    Looks like a part is missing from the fix to #4630

  3. zoechi
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    on Aug 31, 2018
  4. zoechi
    added this to the milestone on Aug 31, 2018

  5. iamarnas commented on Aug 31, 2018

    @iamarnas
    iamarnas
    on Aug 31, 2018
    Author

    @zoechi Here is my output of flutter doctor -v

    flutter doctor -v 
    [✓] Flutter (Channel master, v0.7.4-pre.21, on Mac OS X 10.13.6 17G65, locale sv-SE)
    • Flutter version 0.7.4-pre.21 at /Users/arnas/development/tools/flutter
    • Framework revision 7cebaac985 (28 hours ago), 2018-08-29 21:53:39 -0700
    • Engine revision 252da48082
    • Dart version 2.1.0-dev.3.0.flutter-760a9690c2

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/arnas/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-P, build-tools 27.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 27.1.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

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

[✓] Connected devices (1 available)
    • Nexus 5X • 013c535795c613eb • android-arm64 • Android 8.1.0 (API 27)

• No issues found!
  6. zoechi
    added
    platform-androidAndroid applications specifically
    on Aug 31, 2018

  7. tomosullivan8 commented on May 5, 2019

    @tomosullivan8
    tomosullivan8
    on May 5, 2019

    This constantly happens to me too, everytime the app is re-opened (not the initial open) - has there been a fix for this?

    Only resets the systemNavigationBarIconBrightness, everything else stays as expected.

  8. PiN73 commented on Jun 8, 2019

    @PiN73
    PiN73
    on Jun 8, 2019

    Listening AppLifecycleState.resumed with SystemChannels.lifecycle.setMessageHandler didn't work for me.

    It seems AnnotatedRegion can help:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: MaterialApp(
        ...
      ),
    );
  }
}

  9. sgehrman commented on Jan 9, 2020

    @sgehrman
    sgehrman
    on Jan 9, 2020 · Hidden as abuse

  10. PiN73 commented on Jan 9, 2020

    @PiN73
    PiN73
    on Jan 9, 2020

    @sgehrman why is AnnotatedRegion bad?

  11. Xgamefactory commented on Jan 28, 2020

    @Xgamefactory
    Xgamefactory
    on Jan 28, 2020

    Thanks for AnnotatedRegion.
    But if you use AppBar it will totally override systemUiStyle
    app_bar.dart line 588

    final Brightness brightness = widget.brightness
     ?? appBarTheme.brightness
     ?? theme.primaryColorBrightness;
   final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
     ? SystemUiOverlayStyle.light
     : SystemUiOverlayStyle.dark;

   return Semantics(
     container: true,
     child: AnnotatedRegion<SystemUiOverlayStyle>(
       value: overlayStyle,

    we have edited app_bar.dart by removing AnnotatedRegion not a clean solution but

  12. iamarnas commented on Jan 28, 2020

    @iamarnas
    iamarnas
    on Jan 28, 2020
    Author

    Thanks for AnnotatedRegion.
    But if you use AppBar it will totally override systemUiStyle
    app_bar.dart line 588

    final Brightness brightness = widget.brightness
     ?? appBarTheme.brightness
     ?? theme.primaryColorBrightness;
   final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
     ? SystemUiOverlayStyle.light
     : SystemUiOverlayStyle.dark;

   return Semantics(
     container: true,
     child: AnnotatedRegion<SystemUiOverlayStyle>(
       value: overlayStyle,

    we have edited app_bar.dart by removing AnnotatedRegion not a clean solution but

    Just override you AppBar ThemeData with copywith().

  13. Xgamefactory commented on Jan 29, 2020

    @Xgamefactory
    Xgamefactory
    on Jan 29, 2020

    There is a brigthness parameter for appbar but We have custom statusbar and navigation bar coloring not just dark light .

  14. TahaTesser
    added
    a: layoutSystemChrome and Framework's Layout Issues
    on Mar 12, 2020

  15. 9 remaining items

  16. TahaTesser
    added
    found in release: 1.22Found to occur in 1.22
    found in release: 1.26Found to occur in 1.26
    on Jan 27, 2021
  17. designDo
    added a commit that references this issue on Mar 26, 2021

    Fixed systemNavigationBarIconBrightness flutter/flutter#21265

    0df61ca

  18. thang510023 commented on May 31, 2021

    @thang510023
    thang510023
    on May 31, 2021

    Listening AppLifecycleState.resumed with SystemChannels.lifecycle.setMessageHandler didn't work for me.

    It seems AnnotatedRegion can help:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: MaterialApp(
        ...
      ),
    );
  }
}

    it worked for me

  19. Stitch-Taotao commented on Jan 20, 2022

    @Stitch-Taotao
    Stitch-Taotao
    on Jan 20, 2022
    Contributor

    AnnotatedRegion(value: SystemUiOverlayStyle.dark,child: xxx,); not work in Flutter 2.8.1 on Device run in MiUi

    Flutter 2.8.1 • channel stable • https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk.git
    Framework • revision 77d935a (5 weeks ago) • 2021-12-16 08:37:33 -0800
    Engine • revision 890a5fca2e
    Tools • Dart 2.15.1

    But the same code work in Flutter 2.5.1 in MiUi

    Flutter 2.5.1 • channel unknown • unknown source
    Framework • revision ffb2ece (4 months ago) • 2021-09-17 15:26:33 -0400
    Engine • revision b3af521a05
    Tools • Dart 2.14.2

  20. shadyshrif commented on Mar 28, 2022

    @shadyshrif
    shadyshrif
    on Mar 28, 2022

    Listening AppLifecycleState.resumed with SystemChannels.lifecycle.setMessageHandler didn't work for me.

    It seems AnnotatedRegion can help:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: MaterialApp(
        ...
      ),
    );
  }
}

    This was really helpful, but in my case I was using statusBar related customization also.

            statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark

    which didn't work with the AnnotatedRegion

    so my solution was like that

    @override
  Widget build(BuildContext context) {
    SystemUiOverlayStyle uiOverlayStyle = SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarDividerColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark);
    SystemChrome.setSystemUIOverlayStyle(uiOverlayStyle);
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: uiOverlayStyle,
      child: MaterialApp(
        ...
      ),
    );
  }

  21. olegyablokov commented on Apr 28, 2022

    @olegyablokov
    olegyablokov
    on Apr 28, 2022

    I have tried the solutions described here, nothing has helped yet.

  22. bleroux commented on Jan 27, 2023

    @bleroux
    bleroux
    on Jan 27, 2023
    Contributor

    Relying on an AnnotatedRegion is the right solution (SystemChrome.setSystemUIOverlayStyle is an imperative API that might have to be called again, for instance after resuming the app).

    FYI, an AppBar automatically inserts an AnnotatedRegion and since #104827 is merged, AppBar.systemOverlayStyle can be used to style both the status bar and the system navigation bar.

  23. bleroux
    closed this as completedon Jan 27, 2023
  24. bleroux
    added this to Nevercodeon Jan 27, 2023
  25. github-project-automation
    moved this to To do in Nevercodeon Jan 27, 2023
  26. bleroux
    moved this from To do to Issue closed with comment in Nevercodeon Jan 27, 2023
  27. bleroux
    added
    r: solvedIssue is closed as solved
    on Jan 27, 2023

  28. github-actions commented on Mar 3, 2023

    @github-actions
    github-actionsbot
    on Mar 3, 2023

    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.

  29. github-actions
    locked as resolved and limited conversation to collaborators on Mar 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: layoutSystemChrome and Framework's Layout Issuesfound in release: 1.22Found to occur in 1.22found in release: 1.26Found to occur in 1.26frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesplatform-androidAndroid applications specificallyr: solvedIssue is closed as solved

    Type

    No type

    Projects

    • Nevercode
      Status
      Issue closed with comment

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions