为 BottomNavigationBarType.fixed 中的活动项目设置颜色

Question

我有一个包含 4 个项目的固定 BottomNavigationBar，如下所述。

如何设置选中项的颜色？

我已经尝试过：fixedColor 和 selectedItemColor 但它不起作用。

BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.blue,
            //selectedItemColor: Colors.blue,
            currentIndex: snapshot.data.index,
            onTap: _bottomNavBarBloc.pickItem,
            items: [
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.access_time,
                  color: Colors.black,
                ),
              ),
              BottomNavigationBarItem(...),
              BottomNavigationBarItem(...),
              BottomNavigationBarItem(...),
            ]);

Answer 1

There are two types available. fixed or shifting. If we add fixed type , the buttons inside bottom navigation does not show any effect when use click a particular button. It just keep fixed to the bottom navigation. If we add shifting , it will show some kind of cool animation when we click a particular button.

Check this out here

解决方法可能是这样的：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Whosebug"),
      ),
      body: Container(),
      bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: currentIndex,
          onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.access_time,
                color: currentIndex == 0? Colors.blue:Colors.black,
              ),
              title: Container(),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.access_time,
                color: currentIndex == 1? Colors.blue:Colors.black,
              ),
              title: Container(),
            ),
          ]),
    );
  }
}

Answer 2

您可以为活动和正常底部导航项提供不同的图标。

BottomNavigationBarItem _getNavigationItem(IconData icon, String title) {
    return BottomNavigationBarItem(
        backgroundColor: Colors.white,
        activeIcon: Icon(
          icon,
          color: Colors.teal,
        ),
        icon: Icon(icon, color: Colors.grey),
        title: Text(title),
    );
}

为 BottomNavigationBarType.fixed 中的活动项目设置颜色

Set color on active item in a BottomNavigationBarType.fixed

dart

flutter

bottomnavigationview