Repository navigation
BottomNavigationBar items become white when more than 3 items are present #13642
Description
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)
Activity
cbracken commentedon Dec 19, 2017
/cc @xster
xster commentedon Dec 19, 2017
cc @HansMuller, I vaguely remember seen an older bug about this but I can't find it
flyou commentedon Dec 26, 2017
when use BottomNavigationBarType.fixed that ok ，but when use BottomNavigationBarType.shifting that wrong
wiltwitt commentedon Feb 16, 2018
I too have this problem. anyone know how to fix this?
chusmf commentedon Mar 8, 2018
same problem to me
Hixie commentedon Mar 9, 2018
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 commentedon Mar 9, 2018
When more than 3 BottomNavigationBar items are provided the type, if unspecified, changes to
BottomNavigationBarType.shiftingper 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.shiftingthe items text and icons are rendered in white, via DefaultTextStyle and IconTheme. It's assumed that theirBottomNavigationBarItem.backgroundColorwill be specified as a contrasting color. This is obviously confusing.The overall idea with
shiftingtype 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 commentedon Mar 10, 2018
@HansMuller Thanks, that worked!
tygryk commentedon Apr 19, 2018
@HansMuller, kudos!
eshinkawa commentedon Aug 10, 2018
If you didn't understand how to fix it:
ThinkDigitalSoftware commentedon Aug 10, 2018
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 commentedon Sep 8, 2018
thank you 👍
1 remaining item
dmorawetz commentedon Sep 25, 2018
What do I do, if I don't want the icons to be white, yet it should have the behavior of shifting?
mliitfall commentedon Oct 25, 2018
Why don't just make the default type .fixed?
JPM84 commentedon Mar 2, 2019
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.
8ebb318 Revert "Issues/39832 reland (flutter#13642)" (flutter-team-ar…
Roll engine 6c763bb..8ebb318 (15 commits) (#44300)
nikhilmeria commentedon Jan 10, 2020
I provided the " backgroundColor" agrument for each "BottomNavigationBarItem" and the problem is solved.
SilvaEngComp commentedon Feb 13, 2020
Eu consegui resolver o problema inserindo a propriedade showUnselectedLabels: true, no BottomNavigationBar
return new BottomNavigationBar(
Mahn00rMalik commentedon Apr 28, 2020
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 commentedon May 1, 2020
add showUnselectedLabels:true to BottomNavigationBar
add backgroundColor: Colors.blue to BottomNavigationBarItem
Then all shown
Quiqueitc commentedon May 23, 2020
I think the same
errorsolve commentedon Feb 28, 2021
github-actions commentedon Aug 5, 2021
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 -vand a minimal reproduction of the issue.