Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BottomNavigationBar items become white when more than 3 items are present #13642

Closed
DirkWillem opened this issue Dec 17, 2017 · 18 comments
Closed

BottomNavigationBar items become white when more than 3 items are present #13642

DirkWillem opened this issue Dec 17, 2017 · 18 comments

Comments

@DirkWillem
Copy link

@DirkWillem DirkWillem commented Dec 17, 2017

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:

schermafbeelding 2017-12-17 om 20 52 39

schermafbeelding 2017-12-17 om 20 52 50

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 cbracken added the framework label Dec 19, 2017
@cbracken

This comment has been minimized.

Copy link
Member

@cbracken cbracken commented Dec 19, 2017

/cc @xster

@xster

This comment has been minimized.

Copy link
Contributor

@xster xster commented Dec 19, 2017

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

@flyou

This comment has been minimized.

Copy link

@flyou flyou commented Dec 26, 2017

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

@wiltwitt

This comment has been minimized.

Copy link

@wiltwitt wiltwitt commented Feb 16, 2018

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

@chusmf

This comment has been minimized.

Copy link

@chusmf chusmf commented Mar 8, 2018

same problem to me

@Hixie Hixie added this to the 4: Next milestone milestone Mar 9, 2018
@Hixie

This comment has been minimized.

Copy link
Contributor

@Hixie Hixie commented 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

This comment has been minimized.

Copy link
Contributor

@HansMuller HansMuller commented Mar 9, 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.

@wiltwitt

This comment has been minimized.

Copy link

@wiltwitt wiltwitt commented Mar 10, 2018

@HansMuller Thanks, that worked!

@tygryk

This comment has been minimized.

Copy link

@tygryk tygryk commented Apr 19, 2018

@HansMuller, kudos!

@eshinkawa

This comment has been minimized.

Copy link

@eshinkawa eshinkawa commented Aug 10, 2018

If you didn't understand how to fix it:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
@ThinkDigitalSoftware

This comment has been minimized.

Copy link
Contributor

@ThinkDigitalSoftware ThinkDigitalSoftware commented 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

This comment has been minimized.

Copy link

@bachtiaryayan bachtiaryayan commented Sep 8, 2018

thank you 👍

@creative-junk

This comment has been minimized.

Copy link

@creative-junk creative-junk commented Sep 19, 2018

thank you.

@Morosko

This comment has been minimized.

Copy link

@Morosko Morosko commented 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

This comment has been minimized.

Copy link

@mliitfall mliitfall commented Oct 25, 2018

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

@JPM84

This comment has been minimized.

Copy link

@JPM84 JPM84 commented 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.

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this issue Nov 6, 2019
engine-flutter-autoroll added a commit that referenced this issue Nov 6, 2019
git@github.com:flutter/engine.git/compare/6c763bb551cb...8ebb318

git log 6c763bb..8ebb318 --no-merges --oneline
2019-11-06 47866232+chunhtai@users.noreply.github.com Revert "Issues/39832 reland (#13642)" (flutter/engine#13720)
2019-11-06 chinmaygarde@google.com Ensure that the device pixel ratio is taken into account with window metrics in physical pixels. (flutter/engine#13708)
2019-11-06 jason-simmons@users.noreply.github.com Fix NPE in splash screen lookup (flutter/engine#13719)
2019-11-06 skia-flutter-autoroll@skia.org Roll src/third_party/skia 6e54a299cce9..6790423f84ef (11 commits) (flutter/engine#13718)
2019-11-06 bkonyi@google.com Roll src/third_party/dart 24f1f313a2..462a448ac8 (2 commits)
2019-11-06 bkonyi@google.com Roll src/third_party/dart 80fc4d54e5..24f1f313a2 (5 commits)
2019-11-06 skia-flutter-autoroll@skia.org Roll src/third_party/skia f00524707da7..6e54a299cce9 (1 commits) (flutter/engine#13715)
2019-11-06 skia-flutter-autoroll@skia.org Roll fuchsia/sdk/core/mac-amd64 from bCFtP... to 6Du8E... (flutter/engine#13714)
2019-11-06 bkonyi@google.com Roll src/third_party/dart 51016532e8..80fc4d54e5 (2 commits)
2019-11-06 skia-flutter-autoroll@skia.org Roll src/third_party/skia cdc0c23f1a2e..f00524707da7 (2 commits) (flutter/engine#13712)
2019-11-06 bkonyi@google.com Roll src/third_party/dart 8bdca37e98..51016532e8 (21 commits)
2019-11-06 skia-flutter-autoroll@skia.org Roll src/third_party/skia f3d4109a793b..cdc0c23f1a2e (36 commits) (flutter/engine#13707)
2019-11-06 matthew-carroll@users.noreply.github.com Fix splash screen lookup. (#44131) (flutter/engine#13660)
2019-11-06 gspencergoog@users.noreply.github.com Fix editing selection and deletion on macOS (flutter/engine#13702)
2019-11-06 mouad.debbar@gmail.com [web] Don't send keyboard events from text fields to flutter (flutter/engine#13699)


If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-engine-flutter-autoroll
Please CC garyq@google.com on the revert to ensure that a human
is aware of the problem.

To report a problem with the AutoRoller itself, please file a bug:
https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+/master/autoroll/README.md
@speedynik

This comment has been minimized.

Copy link

@speedynik speedynik commented Jan 10, 2020

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

@SilvaEngComp

This comment has been minimized.

Copy link

@SilvaEngComp SilvaEngComp commented Feb 13, 2020

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

return new BottomNavigationBar(

  showUnselectedLabels: true,

  items: <BottomNavigationBarItem>[...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.