Circle background with navigation bar item's active state flutter

Question

I just implemented a bottom bar navigation in my flutter app. However, I needed to do one last thing. I want to add a cicle background to show along side Asset Icon when active. I don't know how to go about it as I need some help.

For now, my code adds the text and the image but I need instructions on how the background can be added with my code.

  new BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage(
                "assets/images/home.png",
              ),
              size: 25,
            ),
            title: Text(
              "Home",
              style: TextStyle(
                fontWeight: FontWeight.w700,
                fontFamily: 'Inter',
                fontSize: _sizeConfig.textSize(
                  context,
                  1.7,
                ),
              ),
            ),
              ),
);

score 2 · Answer 1 · answered Nov 21 '20 at 17:53

One way is by checking the index and changing the color of the container accordingly.

eg : here index store the current screen index

BottomNavigationBarItem(
        icon: Container(
          decoration: BoxDecoration(
              color: index == 0 ? Colors.orange : Colors.transparent,
              shape: BoxShape.circle),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.ac_unit),
          ),
        ),
        title: Text(
          "Home",
          style: TextStyle(
            fontWeight: FontWeight.w700,
            fontFamily: 'Inter',
            fontSize: _sizeConfig.textSize(
              context,
              1.7,
            ),
          ),
        ),
      ),

score 0 · Answer 2 · answered Jan 23 '22 at 01:08

Complementing Mr Random response, instead of using the state to select the witch one to put the container use the activeIcon directive. Here a little example.

BottomNavitationBar(
  items: [
  BottomNavitationBarItem(
    icon: Icon(Icons.home_outline)//Icon to be shown if not selected
    label: 'Home',
    activeIcon: Container(
      decoration: BoxDecoration(
        color: Colors.orange,
        shape: BoxShape.circle
      ),
      child: Padding(
        padding: const EdgeInserts.all(8),
        child: Icon(Icons.home)
      )
    ),
  ),
  BottomNavitationBarItem(
    icon: Icon(Icons.settings_outline)//Icon to be shown if not selected
    label: 'Settings',
    activeIcon: Container(
      decoration: BoxDecoration(
        color: Colors.orange,
        shape: BoxShape.circle
      ),
      child: Padding(
        padding: const EdgeInserts.all(8),
        child: Icon(Icons.settings)
      )
    ),
  )
 ]
);

Circle background with navigation bar item's active state flutter

2 Answers2