Dynamic Bottom Navigation Bar from list Flutter

Question

How to make a bottom navbar which the bottom navbar item get data from list?

bottom navbar example from flutter documentation

bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        label: 'Business',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        label: 'School',
      ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),

score 1 · Answer 1 · answered Feb 17 '22 at 13:21

Create a custom class

    class MyTabItem {

    String title;
    IconData icon;

    MyTabItem(this.name, this.icon);

    }

Create list of tabs:

List<MyTabItem> _items = [
  MyTabItem('Home', Icons.home),
  MyTabItem('Business', Icons.business),
  MyTabItem('School', Icons.school),
];

Create a method to iterate through the _items collection and returns List<BottomNavigationBarItem>

List<BottomNavigationBarItem> getBottomTabs( List<MyTabItem> tabs) {
    return tabs
        .map(
          (item) =>
          BottomNavigationBarItem(
            icon: Icon(item.icon),
            label: item.title,
          ),
    )
        .toList();
  }

Finally, call the method:

bottomNavigationBar: BottomNavigationBar(
          items: getBottomTabs(items),
         ),

Answer was inspired by @Muldec response here: Flutter: Show different icons based on value

score 0 · Answer 2 · answered Jun 18 '21 at 07:34

try this:

List<String> items = ['Home', 'Business', 'School'];

bottomNavigationBar: BottomNavigationBar(
    items: items.map((item) {
        Widget itemIcon = Icon(Icons.home);

        if(item == 'Home')
        {
          itemIcon = Icon(Icons.home),
        }else if(item == 'Business')
        {
          itemIcon = Icon(Icons.business),
        }else if(item == 'School')
        {
          itemIcon = Icon(Icons.school),
        }

        BottomNavigationBarItem(
          icon: itemIcon ,
          label: item,
        ),
      }).toList(),
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),

score 0 · Answer 3 · edited Feb 16 '23 at 13:38

Not allowed to comment Jim's message. I used his code (works fine) but needs correction here I think:

    List<String> items = ['Home', 'Business', 'School'];

    bottomNavigationBar: BottomNavigationBar(
        items: items.map((item) {
            Widget itemIcon = Icon(Icons.home);

        if(item == 'Home')
        {
          itemIcon = Icon(Icons.home),
        }else if(item == 'Business')
        {
          itemIcon = Icon(Icons.business),
        }else if(item == 'School')
        {
          itemIcon = Icon(Icons.school),
        }

        return BottomNavigationBarItem(     // add return
          icon: itemIcon ,
          label: item,
        );                                  // replace , with ;
      }).toList(),
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),

Dynamic Bottom Navigation Bar from list Flutter

3 Answers3