Flutter: BottomNavigationBar items become white when more than 3 items are present
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)
DirkWillem
All 21 comments
/cc @xster
cbracken
on 19 Dec 2017
cc @HansMuller, I vaguely remember seen an older bug about this but I can't find it
xster
on 19 Dec 2017
when use BottomNavigationBarType.fixed that ok ，but when use BottomNavigationBarType.shifting that wrong
flyou
on 26 Dec 2017
I too have this problem. anyone know how to fix this?
wiltwitt
on 16 Feb 2018
same problem to me
chusmf
on 8 Mar 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.
Hixie
on 9 Mar 2018
When more than 3 BottomNavigationBar items are provided the type, if unspecified, changes to BottomNavigationBarType.shifting per https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.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.
HansMuller
on 9 Mar 2018
@HansMuller Thanks, that worked!
wiltwitt
on 10 Mar 2018
@HansMuller, kudos!
tygryk
on 19 Apr 2018
If you didn't understand how to fix it:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
eshinkawa
on 10 Aug 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.
ThinkDigitalSoftware
on 11 Aug 2018
thank you 👍
bachtiaryayan
on 8 Sep 2018
thank you.
creative-junk
on 19 Sep 2018
What do I do, if I don't want the icons to be white, yet it should have the behavior of shifting?
dmorawetz
on 25 Sep 2018
Why don't just make the default type .fixed?
mliitfall
on 25 Oct 2018
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.
JPM84
on 2 Mar 2019
I provided the " backgroundColor" agrument for each "BottomNavigationBarItem" and the problem is solved.
nikhilmeria
on 10 Jan 2020
Eu consegui resolver o problema inserindo a propriedade showUnselectedLabels: true, no BottomNavigationBar
return new BottomNavigationBar(
showUnselectedLabels: true,
items: <BottomNavigationBarItem>[...
SilvaEngComp
on 13 Feb 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 ?
Mahn00rMalik
on 28 Apr 2020
add showUnselectedLabels:true to BottomNavigationBar
add backgroundColor: Colors.blue to BottomNavigationBarItem
Then all shown
SharkLib
on 1 May 2020
¿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
Quiqueitc
on 23 May 2020
Related issues
dyu
·
3Comments
Hixie
·
3Comments
xster
·
3Comments
drewwarren
·
3Comments
najeira
·
3Comments
Most helpful comment
If you didn't understand how to fix it: