Flutter BottomNavigationBar仅显示单个标签，如何设置始终显示全部标签？

问题：实现了BottomNavigationBar，但未选中的标签不显示文字，希望无论是否点击，所有导航栏标签都保持显示。

原代码如下：

home.dart #

import 'package:myProject/MyBottomNavigationBar.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  final int test = 5;

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
        bottomNavigationBar: MyBottomNavigationBar()
        );
  }
}

MyBottomNavigationBar.dart #

import 'package:flutter/material.dart';

class MyBottomNavigationBar extends StatelessWidget {
  const MyBottomNavigationBar({super.key});

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: 0,
      
      fixedColor: Colors.blue,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.person, color: Colors.blue),
          label: 'Profile',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite, color: Colors.blue),
          label: 'Likes',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.music_note, color: Colors.blue),
          label: 'Playlist',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings, color: Colors.blue),
          label: 'Settings',
        ),
      ],
      //currentIndex: 1,
      //onTap: _onItemTapped,
    );
  }
}

解决方案 #

当BottomNavigationBar的item数量超过3个时，Flutter默认会启用BottomNavigationBarType.shifting模式，该模式下未选中的标签文字会被隐藏。要让所有标签始终显示文字，只需显式设置type为BottomNavigationBarType.fixed即可。

修改后的MyBottomNavigationBar代码：

import 'package:flutter/material.dart';

class MyBottomNavigationBar extends StatelessWidget {
  const MyBottomNavigationBar({super.key});

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: 0,
      // 强制使用fixed模式，确保所有标签文字始终显示
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.blue,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.person, color: Colors.blue),
          label: 'Profile',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite, color: Colors.blue),
          label: 'Likes',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.music_note, color: Colors.blue),
          label: 'Playlist',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings, color: Colors.blue),
          label: 'Settings',
        ),
      ],
      //currentIndex: 1,
      //onTap: _onItemTapped,
    );
  }
}

修改完成后，无论导航栏包含多少个item，未选中的标签文字都会保持显示状态。

内容的提问来源于stack exchange，提问作者Tech RCV