I've inserted custom icons into my application and when I run the app, the icons and text are white, instead of the original color.
Two Problems:
1)The Icons are originally black but when I insert it to my Bottom Nav Items they become white.
2)Also only the first item has a tittle beneath the icon the rest doesn't.
This is my code
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
title: Text('Ideas')
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: Text('Profile')
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
title: Text('Bag')
),
],
),
//pubspec.yaml file
fonts:
- family: navBar
fonts:
- asset: assets/fonts/ic_navbar.ttf
The 4 icons
You need to add a type for your ButtomNavigationBar
bottomNavigationBar: BottomNavigationBar(
//Add this line will fix the issue.
type: BottomNavigationBarType.fixed,
currentIndex: 0, // this will be set when a new tab is tapped
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: new Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: Text('Profile'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
title: Text('Bag')
),
],
),
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