Samsung Galaxy S10 System Navigation Bar Icon Brightness Issue

I'm testing on my Samsung Galaxy S10 device and the code works once and when I close and reopen the app, the navigation bar has all of its icons white. To get the navigation bar icons to go dark again, I have to hit the green refresh button in VS Code while in debug mode. Then, the navbar icons turn dark until I close the app and reopen it. However, if I force stop it, the icons turn dark which is what I want but I'm worried that when I build my app that if a user just leaves the app for a second and comes back, their navigation bar would be all messed up and they wouldn't be able to see the buttons. I just want to be able to know why this happens and find a way to fix it.

Expected Result:

Actual Result:

Code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitDown, DeviceOrientation.portraitUp]);
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark));
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'School Life',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
      ),
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.black),
        backgroundColor: Colors.white,
        brightness: Brightness.light,
        elevation: 0,
        centerTitle: true,
        title: Text("Home",
            style: TextStyle(
                color: Colors.black,
                fontFamily: 'OpenSans',
                fontWeight: FontWeight.w600)),
      ),
      drawer: CustomDrawer(),
    );
  }
}

Cmd: flutter doctor -v

[√] Flutter (Channel stable, v1.7.8+hotfix.4, on Microsoft Windows [Version 10.0.18362.295], locale en-US)
    • Flutter version 1.7.8+hotfix.4 at C:\flutter
    • Framework revision 20e59316b8 (5 weeks ago), 2019-07-18 20:04:33 -0700
    • Engine revision fee001c93f
    • Dart version 2.4.0


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\Owner\AppData\Local\Android\Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = C:\Users\Owner\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 38.2.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.37.1)
    • VS Code at C:\Users\Owner\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.3.0

[√] Connected device (1 available)
    • SM G973U • R38M20KGKPK • android-arm64 • Android 9 (API 28)

• No issues found!

Just did a bit of research, check this out. Also, apparently setting AppBar.brightness can do the trick.

Did you see my code? I've tried everything.

Right, I see that now. From your description, it seems like a call to build solves your problem. If you put a print statement in your build function, does it call after closing and re-opening your app (ie, when the problem starts)?

See WidgetsBindingObserver for how exactly to hook up a setState to an app startup. I believe you are interested specifically in WidgetsBindingObserver.didChangeAppLifeCycleState when state is AppLifeCycleState.resumed

Thanks for your help! That seemed to work.

Glad to help!

I'm reopening the issue because the cause of this seems to be the AppBar. Without the AppBar, the issue with the white status bar icons goes away when I relaunch the app.

So... did the WidgetsBindingObserver thing not work? Or are you saying that the cause of the issue should be fixed?

Well I have two projects, one where I don't use an AppBar or WidgetsBindingObserver and it works fine and the one I'm currently working on uses an AppBar and the navigation buttons turn white on the white theme. I was using WidgetsBindingObserver which worked okay-ish but I refactored my project two months ago and decided to get rid of it. Both projects use the exact same code to change theme and the only difference is the AppBar not being on the pages.

I didn't notice the change when I removed WidgetsBindingObserver because I was testing on my physical device and removed the navigation bar since I got Android 10 around there but I was playing around with it today and spent hours trying to figure out why it happened.

I was using WidgetsBindingObserver which worked okay-ish

Mind elaborating? That might give more clues on what the core issue is here.

WidgetsBindingObserver worked fine for my case as on resume, it changed the navigation bar color, but it's not necessary and plus my implementation of it wasn't so good as every widget had to be a StatefulWidget (atleast how I did it inside of initState) since it had to be on every page so no matter which page the user left on, it would work. The real issue is why the AppBar has such an impact on the system navigation bar.

Could it be this?

appBar: AppBar(
  iconTheme: IconThemeData(color: Colors.black),
  backgroundColor: Colors.white,
  brightness: Brightness.light,  // over here
  // ...

That code is old, but no it's not, I've tried both brightness' and got the same result. I thought the same thing at first.

I verified this issue using code sample provided above running on latest stable version with Samsung S10 device, with which I wasn't able to replicate the reported error.
I'll optimistically close this as not reproducible and also the fact that there have not been any activity recently.
If anybody still thinks this is an issue on latest version, please file a new issue with relevant details so that we can address it properly.

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

Samsung Galaxy S10 System Navigation Bar Icon Brightness Issue #39132

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Samsung Galaxy S10 System Navigation Bar Icon Brightness Issue #39132

Description

Activity

Levi-Lesches commented on Aug 25, 2019

Reprevise commented on Aug 25, 2019

Levi-Lesches commented on Aug 25, 2019

Levi-Lesches commented on Aug 25, 2019

Reprevise commented on Aug 26, 2019

Levi-Lesches commented on Aug 26, 2019

Reprevise commented on Feb 16, 2020

Levi-Lesches commented on Feb 16, 2020

Reprevise commented on Feb 16, 2020

Levi-Lesches commented on Feb 16, 2020

Reprevise commented on Feb 16, 2020

Levi-Lesches commented on Feb 16, 2020

Reprevise commented on Feb 16, 2020

11 remaining items

darshankawar commented on Mar 27, 2024

github-actions commented on Apr 10, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions