Flutter 底部导航栏：第一项比其余项大

Question

[这里是 Screenshot:https://i.stack.imgur.com/V2BnH.png][1]

我不是 Flutter 专家，所以我创建了这个带有 5 个图标的底部导航栏。问题是，不知何故，最左侧的第一个图标比其他图标稍大。特别是最左边第一个图标下面的文字 'Start' 比其他图标大一点。我真的无法解释为什么？到目前为止我试过的是添加 BottomNavigationBarType.fixed 但这并没有解决问题.. 我能做什么？非常感谢！！

  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

Answer 1

在 BottonNavigationBar 中使用 unselectedFontSize、selectedFontSize、currentIndex: _selectedIndex

得到你期望的结果

例子

enter link description here

Flutter 底部导航栏：第一项比其余项大

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

dart

flutter

bottomnavigationview

flutter-bottomnavigation