Flutter Bottom Navigation Bar: First item is bigger than the rest

Issue

[Here is the Screenshot:https://i.stack.imgur.com/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.stack.imgur.com/V2BnH.png

Solution

use unselectedFontSize, selectedFontSize, currentIndex: _selectedIndex in BottonNavigationBar

to get the result you expect

example

enter link description here

Answered By – Matheus Santos

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *