Flutter: Os itens BottomNavigationBar ficam brancos quando mais de 3 itens estão presentes
Passos para reproduzir
Ao adicionar mais de 3 itens em um BottomNavigationBar , todos os itens ficam brancos e são ilegíveis no fundo cinza claro. Além disso, o item ativo também é branco, e não o fixedColor . Um exemplo de código mínimo pode ser encontrado aqui
Veja também as seguintes imagens:
Histórico
N / D
Médico Flutter
[✓] 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
Todos 21 comentários
/cc @xster
cbracken
em 19 dez. 2017
cc @HansMuller , lembro vagamente de ter visto um bug mais antigo sobre isso, mas não consigo encontrá-lo
xster
em 19 dez. 2017
quando usar BottomNavigationBarType.fixed isso ok, mas quando usar BottomNavigationBarType.shifting errado
flyou
em 26 dez. 2017
Eu também tenho esse problema. Alguém sabe como consertar isso?
wiltwitt
em 16 fev. 2018
mesmo problema comigo
chusmf
em 8 mar. 2018
Eu adicionei isso à nossa lista de coisas para ver ainda este ano. Ficaríamos felizes em revisar os patches se alguém tiver a oportunidade de examinar o código e descobrir o que está acontecendo antes de chegarmos a ele.
Hixie
em 9 mar. 2018
Quando mais de 3 itens BottomNavigationBar são fornecidos, o tipo, se não especificado, muda para BottomNavigationBarType.shifting por https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. Essa informação deve ser destacada no documento da classe. É fácil ignorar onde está (eu ignorei).
Quando o tipo de BottomNavigationBar é BottomNavigationBarType.shifting o texto e os ícones dos itens são renderizados em branco, via DefaultTextStyle e IconTheme. Supõe-se que seu BottomNavigationBarItem.backgroundColor será especificado como uma cor contrastante. Isso é obviamente confuso.
A ideia geral das barras de navegação inferiores do tipo shifting é que cada item terá uma cor de fundo diferente (que contrasta com o branco), pois essa cor se tornará a cor de toda a barra de navegação, quando o item for selecionado.
O documento para BottomNavigationBar e NavigationBarItem precisa ser aprimorado.
HansMuller
em 9 mar. 2018
@HansMuller Obrigado, funcionou!
wiltwitt
em 10 mar. 2018
@HansMuller , parabéns!
tygryk
em 19 abr. 2018
Se você não entendeu como corrigi-lo:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
eshinkawa
em 10 ago. 2018
Sou o único que acha que não deve mudar o comportamento com base no número de abas automaticamente?
Não me parece intuitivo esperar um comportamento diferente.
ThinkDigitalSoftware
em 11 ago. 2018
obrigado 👍
bachtiaryayan
em 8 set. 2018
obrigada.
creative-junk
em 19 set. 2018
O que eu faço, se eu não quiser que os ícones sejam brancos, mas ele deve ter o comportamento de deslocamento?
dmorawetz
em 25 set. 2018
Por que não tornar o tipo padrão .fixed?
mliitfall
em 25 out. 2018
Eu sei que esse problema foi encerrado, mas ainda parece um bug, embora a documentação tenha sido bem atualizada.
Eu sugiro corrigir o padrão ou corrigir o comportamento de BottomNavigationBarType.shifting com quatro itens.
JPM84
em 2 mar. 2019
Forneci o agrument "backgroundColor" para cada "BottomNavigationBarItem" e o problema foi resolvido.
nikhilmeria
em 10 jan. 2020
Eu consegui resolver o problema inserindo a propriedade showUnselectedLabels: true, no BottomNavigationBar
return new BottomNavigationBar(
showUnselectedLabels: true,
items: <BottomNavigationBarItem>[...
SilvaEngComp
em 13 fev. 2020
o que é que não queremos que o comportamento mude se tivermos mais de três itens. Existe algum trabalho para isso?
Mahn00rMalik
em 28 abr. 2020
adicione showUnselect tedLabels:true to BottomNavigationBar
adicione backgroundColor: Colors.blue para BottomNavigationBarItem
Então tudo mostrado
SharkLib
em 1 mai. 2020
Só eu acho que não devo mudar o comportamento com base no número de abas automaticamente?
Não me parece intuitivo esperar um comportamento diferente.
Eu acho o mesmo
Quiqueitc
em 23 mai. 2020
Questões relacionadas
apwilson
·
3Comentários
xster
·
3Comentários
collinjackson
·
3Comentários
najeira
·
3Comentários
dyu
·
3Comentários
Comentários muito úteis
Se você não entendeu como corrigi-lo: