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,
),
class MyTabItem {
String title;
IconData icon;
MyTabItem(this.name, this.icon);
}
List<MyTabItem> _items = [
MyTabItem('Home', Icons.home),
MyTabItem('Business', Icons.business),
MyTabItem('School', Icons.school),
];
_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();
}
bottomNavigationBar: BottomNavigationBar(
items: getBottomTabs(items),
),
Answer was inspired by @Muldec response here: Flutter: Show different icons based on value
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With