[Here is the Screenshot:https://i.sstatic.net/V2BnH.png][1]
I'm no expert in Flutter so i created this Bottom Nav Bar with 5 icons. The problem is, that somehow the first icon on the very left side is slightly bigger than the other ones. Especially the text 'Start' unter the first icon on the very left side is a little bit bigger than the other ones. I really can't explain why? What I've tried so far is to add BottomNavigationBarType.fixed but this didn't solve the Problem.. What can I do? Thank you so much!!
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
PageController _pageController = PageController();
List<Widget> _screens = [
WallboxPage(),
RechnerPage(),
StartPage(),
MapsPage(),
TimerPage()
];
int _selectedIndex = 0;
void _onPageChanged(int index) {
setState(
() {
_selectedIndex = index;
},
);
}
void _onItemTapped(int selectedIndex) {
_pageController.jumpToPage(selectedIndex);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
children: _screens,
onPageChanged: _onPageChanged,
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
//showUnselectedLabels: false,
//showSelectedLabels: false,
type: BottomNavigationBarType
.fixed, //das muss dazu, damit mehr als 5 Items möglich.
backgroundColor: Color(0xffECECEB),
onTap: _onItemTapped,
//unselectedFontSize: 12,
//selectedFontSize: 12,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,
color: _selectedIndex == 0
? Color(0xffF6BE03)
: Color(0xffB4B4B3),
size: 25),
title: Text(
'Start',
style: TextStyle(
color: _selectedIndex == 0
? Color(0xffF6BE03)
: Color(0xffB4B4B3),
fontSize: 11),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.directions_car_rounded,
color:
_selectedIndex == 1 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
size: 25),
title: Text(
'Portal',
style: TextStyle(
color: _selectedIndex == 1
? Color(0xffF6BE03)
: Color(0xffB4B4B3),
fontSize: 11),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.euro_rounded,
color:
_selectedIndex == 2 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
size: 25),
title: Text(
'Förderungen',
style: TextStyle(
color: _selectedIndex == 2
? Color(0xffF6BE03)
: Color(0xffB4B4B3),
fontSize: 11),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.map,
color:
_selectedIndex == 3 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
size: 25),
title: Text(
'Karte',
style: TextStyle(
color: _selectedIndex == 3
? Color(0xffF6BE03)
: Color(0xffB4B4B3),
fontSize: 11),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.timer,
color:
_selectedIndex == 4 ? Color(0xffF6BE03) : Color(0xffB4B4B3),
size: 25),
title: Text(
'Ladezeit',
style: TextStyle(
color: _selectedIndex == 4
? Color(0xffF6BE03)
: Color(0xffB4B4B3),
fontSize: 11),
),
),
],
),
);
}
}```
[1]: https://i.sstatic.net/V2BnH.png
use unselectedFontSize, selectedFontSize, currentIndex: _selectedIndex in BottonNavigationBar
to get the result you expect
example