Question 235157 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to conditionally define colors of icons in bottom app bar

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.

Tags:

2

Answers


  1. 0 
    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:

    enter image description here

    ScreenB:

    enter image description here

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

    Login or Signup to reply.
  2. 0

    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],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search