How to set BackGroundColor in BottomNavigationBarItem in flutter?-CodePudding

[enter image description here][1] Thats My Code how to add only selected BottomNavigationBarItem background color and size in flutter. I have add my Model Screen image in below.. any one plz help me

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

          backgroundColor: Color(0xffffcc2a),
          showUnselectedLabels: true,
          currentIndex: _currentIndex,
          elevation: 20.0,
          onTap: callPage,

          selectedItemColor: Color(0xff3666ad),
          unselectedItemColor: Color(0xff3666ad),

          // this will be set when a new tab is tapped
          items: [
            BottomNavigationBarItem(
              icon: new Icon(
                Icons.ballot,
                color: Color(0xff3666ad),
              ),
              label: 'Insurance',
            ),
            BottomNavigationBarItem(
              icon: new FaIcon(
                FontAwesomeIcons.car,
                color: Color(0xff3666ad),
              ),
              label: 'Motor',
            ),
            BottomNavigationBarItem(
              icon: new Icon(
                Icons.medical_services,
                color: Color(0xff3666ad),
              ),
              label: ('Health'),
            ),
            BottomNavigationBarItem(
              // backgroundColor: Color(0xffffcc2a),
              icon: new Icon(
                Icons.flight,
                color: Color(0xff3666ad),
              ),
              label: ('Travel'),
            ),
            BottomNavigationBarItem(
              // backgroundColor: Color(0xffffcc2a),
              icon: new Icon(
                Icons.local_fire_department,
                color: Color(0xff3666ad),
              ),
              label: ('Fire'),
            ),
            BottomNavigationBarItem(
              // backgroundColor: Color(0xffffcc2a),
              icon: FaIcon(
                FontAwesomeIcons.layerGroup,
                color: Color(0xff3666ad),
              ),
              label: ('Misc'),
            )
          ],
        ),

CodePudding user response：

I'm using custom bottomNavigationBar for this case, play around with style and the way you desire.


class _TestWidgetState extends State<TestWidget> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Container(
        color: Colors.green, // main background
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            NavItem(
              icon: const Icon(Icons.ac_unit),
              isSelected: 0 == _currentIndex,
              label: "Item 1",
              onTap: () {
                setState(() {
                  _currentIndex = 0;
                });
              },
            ),
            NavItem(
              icon: Icon(Icons.umbrella),
              isSelected: 1 == _currentIndex,
              label: "Item 2",
              onTap: () {
                setState(() {
                  _currentIndex = 1;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class NavItem extends StatelessWidget {
  const NavItem({
    Key? key,
    required this.icon,
    required this.isSelected,
    required this.onTap,
    required this.label,
  }) : super(key: key);

  final bool isSelected;
  final VoidCallback onTap;
  final String label;
  final Widget icon; // you may use different widget

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: (InkWell(
        onTap: onTap,
        child: Container(
          color: isSelected
              ? Colors.pink
              : Colors.amber, //selected background pink
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              icon,
              Text("$label"),
            ],
          ),
        ),
      )),
    );
  }
}

CodePudding user response：

Instead of adding list items as you do, use a function that gives you access to the index of the item you are creating. Then instead of this section in your code:

selectedItemColor: Color(0xff3666ad),
unselectedItemColor: Color(0xff3666ad),

// this will be set when a new tab is tapped
items: [
..
]

Use something like this:

selectedItemColor: Color(0xff3666ad),
unselectedItemColor: Color(0xff3666ad),

// this will be set when a new tab is tapped
items: List.generate(
  10,
  (index) => BottomNavigationBarItem(
    icon: new Icon(
      Icons.ballot,
      color: index == _currentIndex ? Colors.green : Colors.red,
    ),
    label: 'Insurance',
  ),
),

Main points of interest being the use of

List.generate(int lenght, BottomNevigaitonBarItem Function(int) generator, bool growable = true)

and

color: index == _currentIndex ? Colors.green : Colors.red

for each BottomNavigationBarItem.

In the List.generate function, generator is the piece of code that creates each individual BottomNavigationBarItem items, based on their index (the int parameter).