BottomNavigationBar items become white when more than 3 items are present

[DirkWillem]

Steps to Reproduce

When adding more than 3 items in a BottomNavigationBar, all items turn white, and are unreadable on the light-gray background. Also, the active item is also white, and not the provided fixedColor. A minimal code sample can be found here

Also see the following images:

Logs

N/A

Flutter Doctor

[✓] Flutter (on Mac OS X 10.13.1 17B1003, locale nl-NL, channel alpha)
    • Flutter at /Users/dirk/Developer/flutter/sdk
    • Framework revision 8f65fec5f5 (5 days ago), 2017-12-12 09:50:14 -0800
    • Engine revision edaecdc8b8
    • Tools Dart version 1.25.0-dev.11.0
    • Engine Dart version 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/dirk/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-26, build-tools 26.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_112-release-b06)

[-] iOS toolchain - develop for iOS devices (Xcode 9.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.2, Build version 9C40b
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    • CocoaPods version 1.2.0

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.3)
    • Flutter plugin version 20.0.3
    • Dart plugin version 173.3727.108

[✓] Connected devices
    • iPhone X • 9500EA8E-1292-4223-BFFF-1B2134D5C47C • ios • iOS 11.2 (simulator)

[cbracken]

/cc @xster

[xster]

cc @HansMuller, I vaguely remember seen an older bug about this but I can't find it

[flyou]

when use BottomNavigationBarType.fixed that ok ，but when use BottomNavigationBarType.shifting that wrong

[wiltwitt]

I too have this problem. anyone know how to fix this?

[chusmf]

same problem to me

[Hixie]

I have added this to our list of things to look at later this year. We would be happy to review patches if anyone has the opportunity to look at the code and figure out what's going on before we get to it, though.

[HansMuller]

When more than 3 BottomNavigationBar items are provided the type, if unspecified, changes to BottomNavigationBarType.shifting per https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html. This bit of information should be highlighted in the class's doc. It's easy to overlook where it is (I overlooked it).

When the BottomNavigationBar's type is BottomNavigationBarType.shifting the items text and icons are rendered in white, via DefaultTextStyle and IconTheme. It's assumed that theirBottomNavigationBarItem.backgroundColor will be specified as a contrasting color. This is obviously confusing.

The overall idea with shifting type bottom navigation bars is that each item will have a different background color (that contrasts with white), since that color will become the color of the entire navigation bar, when the item is selected.

The doc for BottomNavigationBar, and NavigationBarItem needs to be improved.

[wiltwitt]

@HansMuller Thanks, that worked!

[tygryk]

@HansMuller, kudos!

[eshinkawa]

If you didn't understand how to fix it:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

[ThinkDigitalSoftware]

Am I the only one that thinks that it shouldn't change behavior based on the number of tabs automatically?
It doesn't seem intuitive to me to expect a different behavior.

[bachtiaryayan]

thank you 👍

[creative-junk]

thank you.

[dmorawetz]

What do I do, if I don't want the icons to be white, yet it should have the behavior of shifting?

[mliitfall]

Why don't just make the default type .fixed?

[JPM84]

I know this issue has been closed but it still feels like a bug even though the documentation has been nicely updated.
I'd suggest making fixed the default or fixing the behavior of BottomNavigationBarType.shifting with four items.

[nikhilmeria]

I provided the " backgroundColor" agrument for each "BottomNavigationBarItem" and the problem is solved.

[SilvaEngComp]

Eu consegui resolver o problema inserindo a propriedade showUnselectedLabels: true, no BottomNavigationBar

return new BottomNavigationBar(

  showUnselectedLabels: true,

  items: <BottomNavigationBarItem>[...

[Mahn00rMalik]

what is we don't want the behavior to be shifting if we have more than three items. Is there any work around for it ?

[SharkLib]

add showUnselectedLabels:true to BottomNavigationBar
add backgroundColor: Colors.blue to BottomNavigationBarItem
Then all shown

[Quiqueitc]

¿Soy el único que piensa que no debería cambiar el comportamiento en función del número de pestañas automáticamente?
No me parece intuitivo esperar un comportamiento diferente.

I think the same

[github-actions]

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.