CODEWITHSUNDEEP
flutterdart
alX-U
alX-U

Reputation: 103

How do i change the label's color in a BottomNavigationBarItem in Flutter?

I'm putting some bottom navigation bar items in my app's menu and I want them to have some labels. I put the labels but I don't really know how to change their base color. Like I want all of them to be white.

Here's the code for one of them:

bottomNavigationBar: BottomNavigationBar(
      unselectedLabelStyle: const TextStyle(color: Colors.white, fontSize: 14),
      backgroundColor: const Color(0xFF084A76),
      fixedColor: Colors.white,
      items: [
        BottomNavigationBarItem(
            icon: InkWell(
              onTap: () async {
                //Borramos un lote
                deleteLote();
              },
              child: Container(
                height: 47,
                width: 50,
                decoration: const BoxDecoration(
                    shape: BoxShape.circle, color: Colors.black38),
                child: const Icon(
                  Icons.delete,
                  size: 32,
                  color: Colors.white,
                ),
              ),
            ),
            label: 'Borrar Lote'),
        BottomNavigationBarItem(
            icon: InkWell(
              onTap: () async {
                //Añadimos un lote
                addLote();
              },
              child: Container(
                height: 47,
                width: 50,
                decoration: const BoxDecoration(
                    shape: BoxShape.circle, color: Colors.black38),
                child: const Icon(
                  Icons.add,
                  size: 32,
                  color: Colors.white,
                ),
              ),
            ),
            label: 'Añadir Lote')
      ],
    )

Image of how it's looking right now, for reference:

BottomNavigationBarItems

Upvotes: 8

Views: 22537

Answers (3)

Jabez Samuel
Jabez Samuel

Reputation: 51

If the color for the label is still not seen, you can try this:

showUnselectedLabels: true,

in your BottomNavigationBar

Upvotes: 5

Eugene Kuzmenko
Eugene Kuzmenko

Reputation: 1507

You have to change unselectedItemColor property in your BottomNavigationBar.

bottomNavigationBar: BottomNavigationBar(
      unselectedLabelStyle: const TextStyle(color: Colors.white, fontSize: 14),
      backgroundColor: const Color(0xFF084A76),
      fixedColor: Colors.white,
      unselectedItemColor: Colors.white, //<-- add this
...

More details: BottomNavigationBar

Upvotes: 13

Bintang Lazuardi
Bintang Lazuardi

Reputation: 166

Instead use :

unselectedLabelStyle: const TextStyle(color: Colors.white, fontSize: 14),

you can try :

unselectedItemColor: Colors.white,
unselectedFontSize: 14,

in your BottomNavigationBar

Upvotes: 6

Related Questions