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.

Answer 1

you can define a bool like bool isPage1 =true; and update the value whenever you press the iconButton to push the next page like this: IconButton( onPressed: () { Navigator.of(context) .push(MaterialPageRoute(builder: (context) => const ScreenB())); isPage1 = false},, and use that in a ternary operator to set the color based on the value of isPage1 here is an example: Icon( Icons.abc, color: isPage1==true?Colors.white:Colors.grey, ),

Answer 2

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],
    );
  }
}