[3.32] Bottom navigation bar background color remains black and not working per device's light and dark theme modes.

[em-jasper]

Steps to reproduce

Render a screen

Expected results

I expected the background of my buttons to be:

• Grey-ish on light mode
• Black on dark mode

Actual results

The background color of my buttons remain black on both light and dark mode:

Code sample

Code sample

return Scaffold(
      body: const Text('test'),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          const BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: const Icon(Icons.settings),
            label: AppLocalizations.of(context).settings,
          ),
        ],
      ),
    );

Screenshots or Video

Logs

No response

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.32.0, on Microsoft Windows [Version 10.0.19045.5854], locale nl-BE)
[√] Windows Version (10 Pro 64-bit, 22H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Enterprise 2019 16.11.23)
[√] Android Studio (version 2023.3)
[√] Android Studio (version 2024.3.2)
[√] VS Code, 64-bit edition (version 1.100.2)
[√] Connected device (4 available)
[√] Network resources

• No issues found!

[darshankawar]

@em-jasper Can you provide what was the behavior in previous version if this is only occuring on latest stable ? Also, are you saying that upon tapping on Home and settings buttons, the background effect should be per your device's mode (dark or grey) ?

[em-jasper]

@darshankawar In the previous version the backgroundcolor of these buttons were the exact same color as the background of my scaffold.

The tapping of these buttons should not impact the color (black). Only the toggle between light and dark mode should affect these buttons.

To clarify i am talking about this background color:

[darshankawar]

@em-jasper Thanks for the update. Are you changing the mode (dark or light) from device's settings or in the code itself using SystemUIOverlaySettings ?

In the previous version the backgroundcolor of these buttons were the exact same color as the background of my scaffold.

Can you provide screenshot or short video of this behavior ?

[nekomaruh]

I have the same issue with gestures, the navigation bar turned black instead of the default white system color

Here is an example:

[em-jasper]

@darshankawar I am not overriding the theme. I am simply using the theme of the device.

Before upgrade:

[darshankawar]

Thanks for the update. I was able to verify and replicate the reported behavior by running the code on S10+ device (Android 11) wherein, the bottom navigation bar color doesn't change based on device's light / dark mode theme in latest stable version, but works properly in previous stable 3.29.3. Based on this, I'll keep the issue open and label for team's tracking.

stable : 3.32.0
master : 3.33.0-1.0.pre.186

[em-jasper]

Any updates when this might get solved?I am currently waiting for this fix to release a version.

Thanks in advance

[em-jasper]

@jesswrd

According to the documentation in "https://api.flutter.dev/flutter/material/AppBar/systemOverlayStyle.html" If that is also null, an appropriate SystemUiOverlayStyle is calculated based on the backgroundColor.

But this doesn't seem to do it. For now I fixed this by manually defining the systemOverlayState to for lightmode:

systemOverlayStyle: SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.grey[100],
          systemNavigationBarIconBrightness: Brightness.dark,
          systemNavigationBarContrastEnforced: true,
          systemNavigationBarDividerColor: Colors.transparent,
        ),

for darkmode:

systemOverlayStyle: SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.black,
          systemNavigationBarIconBrightness: Brightness.light,
          systemNavigationBarContrastEnforced: true,
          systemNavigationBarDividerColor: Colors.transparent,
        ),

Or is there a better way to do this?

[332lfgb6]

same issue

[Musfick]

same issue

[flutter-triage-bot[bot]]

This issue is assigned to @jesswrd but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!