Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Four icons added in the BottomNavigationBarItem is not working

Tags:

flutter

dart

I'm new to flutter I created a bottom navigation bar when I trying to add four icons. The icon color change to white. How should I achieve this can anyone suggest me. Below is my code. Any help will be appreciated.

 bottomNavigationBar: new BottomNavigationBar(items: [
    new BottomNavigationBarItem(icon: new Icon(Icons.add), title: new Text("Text")),
    new BottomNavigationBarItem(icon: new Icon(Icons.person), title: new Text("Contact")),
    new BottomNavigationBarItem(icon: new Icon(Icons.accessibility), title: new Text("Acess")),
    new BottomNavigationBarItem(icon: new Icon(Icons.account_balance), title: new Text("Balance"))
  ]),
like image 391
Husna Avatar asked Oct 17 '25 11:10

Husna


1 Answers

When you have more than 3 elements, you need to explicitly set type: BottomNavigationBarType.fixed,

bottomNavigationBar: new BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: [
    new BottomNavigationBarItem(icon: new Icon(Icons.add), title: new Text("Text")),
    new BottomNavigationBarItem(icon: new Icon(Icons.person), title: new Text("Contact")),
    new BottomNavigationBarItem(icon: new Icon(Icons.accessibility), title: new Text("Acess")),
    new BottomNavigationBarItem(icon: new Icon(Icons.account_balance), title: new Text("Balance"))
  ]),

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.

like image 163
Günter Zöchbauer Avatar answered Oct 19 '25 08:10

Günter Zöchbauer



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!