How to conditionally define colors of icons in bottom app bar

Question

I want to use a BottomAppBar and due to technical reasons I cannot use the BottomNavigationBar. How do I define the color of my icons depending on which screen I'm on? I.e. when I am on Screen A, the Sceen A Icon in the BottomAppBar should be white, but if I am on Screen B, it should be grey and the Screen B icon should be white.

My first idea was to use a ternary expression:

class Bar extends StatefulWidget {
  const Bar({super.key});
  
  @override
  State<Bar> createState() => _BarState();
}

class _BarState extends State<Bar> {
  @override
  Widget build(BuildContext context) {
    var route = ModalRoute.of(context);
    return SafeArea(
      child: BottomAppBar(
        color: Colors.white,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
              onPressed: () => Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => ScreenA())),
              icon: Icon(
                Icons.abc,
                color: route==ScreenA()?Colors.white:Colors.grey,
              ),
            ),
            IconButton(
              onPressed: () => Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => const ScreenB())),
              icon: Icon(
                Icons.abc,
                color: route==ScreenB()?Colors.white:Colors.grey,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I think I did not correctly define the variable for which screen I'm on currently.

score 0 · Answer 1 · answered Aug 21 '23 at 20:23

class _BarState extends State<Bar> {
  
  int _selectedIndex = 0;
  static List<Widget> _widgetOptions = <Widget>[
    ScreenA(),
    ScreenB(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    var route = ModalRoute.of(context);
    return Scaffold(
      backgroundColor: Colors.orange, 
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.orange, // set background color for bottom navigation bar
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home,),
            label: "ScreenA",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.card_giftcard),
            label: "ScreenB",
          ),
         
        ],
        type: BottomNavigationBarType.fixed,
        showUnselectedLabels: false,
        unselectedItemColor: Colors.black54,// set unselected item color for bottom navigation bar
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.white,// set selected item color for bottom navigation bar
        onTap: _onItemTapped,
      ),
      body: _widgetOptions.elementAt(_selectedIndex),
    );
  }
}

Output of this code:

ScreenA:

ScreenB:

You can use in your project. I hope I have helped. Enjoy your work.

As I wrote in my question, BottomNavigationBar cannot be used. — Raul Ponzheimer, Aug 22 '23 at 08:53

score 0 · Answer 2 · answered Aug 22 '23 at 00:05

Try this example and if you need individual colors for every menu, you can try to use multi-condition ternary operator. I've added an example for you.

class NavigationExample extends StatefulWidget {
  const NavigationExample({super.key});

  @override
  State<NavigationExample> createState() => _NavigationExampleState();
}

class _NavigationExampleState extends State<NavigationExample> {
  int currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        //indicatorColor: currentPageIndex == 0 ? Colors.amber[800] : Colors.red[800] !=  null ? currentPageIndex == 1 ? Colors.deepPurple[800] : Colors.red[800] : Colors.amber[800],  //multi-condition ternary operator like this.
        indicatorColor: Colors.amber[800],
        selectedIndex: currentPageIndex,
        destinations: const [
          NavigationDestination(
            selectedIcon: Icon(Icons.home),
            icon: Icon(Icons.home_outlined),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.school),
            icon: Icon(Icons.school_outlined),
            label: 'School',
          ),
        ],
      ),
      body: [
        Container(
          //you can replaice this widget by your 1st page
          color: Colors.red,
          alignment: Alignment.center,
          child: const Text('Page 1'),
        ),
        ListView.builder(
            //you can replaice this widget by your 2nd page
            itemCount: 5,
            itemBuilder: (context, i) {
              return ListTile(
                title: Text("Index $i Title"),
                subtitle: Text("Index $i Subtitle"),
              );
            }),
        Container(
          //you can replaice this widget by your 3rd page
          color: Colors.blue,
          alignment: Alignment.center,
          child: const Text('Page 3'),
        ),
      ][currentPageIndex],
    );
  }
}

As I wrote in my question, BottomNavigationBar cannot be used. — Raul Ponzheimer, Aug 22 '23 at 08:52
you can create but at that time you've to handle the navigation bar and manage its state using state management. It'll be a bit hard to do using the setState() method. If you want I can give you an example with flutter Provider. — Ashikul Islam Sawan, Aug 22 '23 at 10:06
I would like to make the color conditional and dependent on the current screen I am seeing. I do not want to use the NavBar. — Raul Ponzheimer, Aug 22 '23 at 10:32

How to conditionally define colors of icons in bottom app bar

2 Answers2