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

How to give unique color to one label BottomNavigationBarItem in flutter

I am using the BottomNavigationBar in my Flutter app. I have three items. I want 2 of them to have the default color for selected and unselected labels. But I want to give a unique color to one label. Below is the code

  import 'package:flutter/material.dart';
import 'package:playticket/screens/01.dart';

class CustomNavBar extends StatefulWidget {
  CustomNavBar({Key? key}) : super(key: key);

  @override
  State<CustomNavBar> createState() => _CustomNavBarState();
}

class _CustomNavBarState extends State<CustomNavBar> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    List<Widget> _screens = [
     Screen1(),
     Screen1(),
     Screen1(),
    ];
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: SizedBox(
        height: 90,
        child: BottomNavigationBar(

          backgroundColor: Colors.white,
          type: BottomNavigationBarType.fixed,
          selectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedItemColor: Color(0xff909090),
          currentIndex: _currentIndex,
          selectedItemColor: Color(0xff3D3D3D),
          onTap: (value) {
            setState(() => _currentIndex = value);
          },
          items: [
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25,),
              label: "Home",
              icon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25, color: Color(0xff909090),),
            ),
            BottomNavigationBarItem(
                icon: Image.asset("assets/images/add-box-fill.png", width: 28, height: 28,),
                label: "Create",
               ),
            BottomNavigationBarItem(
                activeIcon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff3D3D3D),),
                label: "Reminder",
                icon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff909090),)
            ),
          ],
        ),
      ),
    );
  }
}

I want the label of 2nd BottomNavigationBarItem "Create" must have red color even it is selected or not.
How can I achieve this

Tags:

2

Answers


  1. 0

    Hey, I try to give you an alternative:

    instead of using an image or an icon, I change it to a Container with a Column that contains an Icon and Text. also set the background color of the container to red to achieve a unique color for that label.then set an empty string to the label property to hide the default label of that item.

    items: [
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25,),
              label: "Home",
              icon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25, color: Color(0xff909090),),
            ),
            BottomNavigationBarItem(
              icon: Container(
                width: 28,
                height: 28,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.add, color: Colors.white, size: 20),
                    Text(
                      "Create",
                      style: TextStyle(fontSize: 8, color: Colors.white),
                    ),
                  ],
                ),
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
              label: "", // Set empty label to hide the default label
            ),
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff3D3D3D),),
              label: "Reminder",
              icon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff909090),),
            ),
          ],
        ),
    Login or Signup to reply.
  2. 0

    You could try this with the selected and unselected color property of the BottomNavigationBar:

    import 'package:flutter/material.dart'; import 'package:playticket/screens/01.dart';

class CustomNavBar extends StatefulWidget {   CustomNavBar({Key? key}) : super(key: key);

  @override   State<CustomNavBar> createState() =>
_CustomNavBarState(); }

class _CustomNavBarState extends State<CustomNavBar> {   int
_currentIndex = 0;

  @override   Widget build(BuildContext context) {
    List<Widget> _screens = [
     Screen1(),
     Screen1(),
     Screen1(),
    ];
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: SizedBox(
        height: 90,
        child: BottomNavigationBar(

          backgroundColor: Colors.white,
          type: BottomNavigationBarType.fixed,
          selectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedItemColor: _currentIndex != 1 ? Color(0xff909090) : Colors.red,
          currentIndex: _currentIndex,
          selectedItemColor: _currentIndex != 1 ? Color(0xff3D3D3D) : Colors.red,
          onTap: (value) {
            setState(() => _currentIndex = value);
          },
          items: [
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25,),
              label: "Home",
              icon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25, color: Color(0xff909090),),
            ),
            BottomNavigationBarItem(
                icon: Image.asset("assets/images/add-box-fill.png", width: 28, height: 28, color: Colors.red),
                label: "Create",
               ),
            BottomNavigationBarItem(
                activeIcon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff3D3D3D),),
                label: "Reminder",
                icon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff909090),)
            ),
          ],
        ),
      ),
    );   } }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search