如何实现红色Flutter BottomNavigation按钮选中样式？

没问题，我来帮你搞定这个需求！要让Flutter的BottomNavigationBar选中项变成红色，其实有两种思路——简单快速的基础配置，和更灵活的自定义方案，咱们一个个说：

如果只是需要选中时的图标和文字变成红色，直接用组件自带的属性就能搞定，完全不用改动你现有的FloatingActionButton：

int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Red Selected Bottom Nav')),
    body: const Center(child: Text('Current Screen')),
    // 你的FloatingActionButton保持原样即可
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: const Icon(Icons.add),
    ),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedIndex,
      // 核心：设置选中项的颜色为红色
      selectedItemColor: Colors.red,
      // 可选：设置未选中项的默认颜色（比如灰色）
      unselectedItemColor: Colors.grey,
      // 选中时的文字样式（可选，比如加粗）
      selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
      // 选中时的图标样式（可选，比如放大）
      selectedIconTheme: const IconThemeData(size: 28),
      onTap: (index) {
        setState(() {
          _selectedIndex = index;
        });
      },
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: 'Search',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Profile',
        ),
      ],
    ),
  );
}

这个方案的好处是代码简洁，完全复用系统组件的逻辑，只需要配置几个属性就能达到效果。

如果你需要更个性化的效果——比如选中项带红色背景、圆角、或者更复杂的布局，那就需要自定义底部导航栏组件了：

int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Custom Red Bottom Nav')),
    body: const Center(child: Text('Current Screen')),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: const Icon(Icons.add),
    ),
    bottomNavigationBar: Container(
      height: 60,
      // 给导航栏加个顶部边框，区分内容区
      decoration: const BoxDecoration(
        border: Border(top: BorderSide(color: Colors.grey.shade300)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildNavItem(Icons.home, 'Home', 0),
          _buildNavItem(Icons.search, 'Search', 1),
          _buildNavItem(Icons.person, 'Profile', 2),
        ],
      ),
    ),
  );
}

// 封装单个导航项的组件
Widget _buildNavItem(IconData icon, String label, int index) {
  bool isSelected = _selectedIndex == index;
  return InkWell(
    onTap: () {
      setState(() {
        _selectedIndex = index;
      });
    },
    child: Container(
      width: MediaQuery.of(context).size.width / 3,
      padding: const EdgeInsets.symmetric(vertical: 8),
      // 选中时显示浅红色背景
      decoration: BoxDecoration(
        color: isSelected ? Colors.red.shade100 : Colors.transparent,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            icon,
            color: isSelected ? Colors.red : Colors.grey,
            size: isSelected ? 28 : 24,
          ),
          const SizedBox(height: 4),
          Text(
            label,
            style: TextStyle(
              color: isSelected ? Colors.red : Colors.grey,
              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
            ),
          ),
        ],
      ),
    ),
  );
}

这个方案的灵活性更高，你可以根据需求调整选中项的背景色、圆角、间距等细节，完全满足个性化的设计要求。

总结一下：如果只是简单的颜色变化，用基础方案就够了；如果需要更复杂的样式，就用自定义组件的方式，两种方案都不会影响你现有的FloatingActionButton~

内容的提问来源于stack exchange，提问作者Thapelo Radebe