Changing active color of bottom navigation bar icon

Question

So I have tried to make a bottom navigation bar in Flutter and everything is working fine, except I want the the color an icon is when I click on it to be different for each icon. So far it's just blue for every icon. Setting the color property permanently changes it to that color and not just when active. I've tried using custom IconThemeData widgets but that didn't seem to do the trick either.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: IconTheme(
              data: IconThemeData(color: Colors.yellow),
              child: Icon(Icons.home),
            ),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.book),
            label: 'Study',
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.userGraduate),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.store),
            label: 'Shop',
          ),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

Oh, sorry I misunderstood. (Removing my incorrect answer). I don't think there is a property you can use to achieve that. I'm guessing, but either replace the BottomNavigationBar on click or write your own version of it. — Robert Sandberg, Mar 15 '21 at 06:54

score 1 · Answer 1 · answered Mar 15 '21 at 08:32

You can declare a List containing all colors you want for your icons. Then change the selectedItemColor to the color of the List.

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

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

  static const List<Color> colors = [Colors.blue, Colors.red, Colors.green];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.book), label: 'Book'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
        currentIndex: currentIndex,
        onTap: (value) => setState(() => currentIndex = value),
        selectedItemColor: colors[currentIndex],
      ),
    );
  }

Changing active color of bottom navigation bar icon

1 Answers1