How to change background color of bottomnavigationItem?

Question

I tried following code but it does not working

BottomNavigationBarItem(
            icon: SvgPicture.asset("assets/icons/tinpay3.svg"),
            label: "TINPAY",
            backgroundColor: Color.fromRGBO(255, 194, 44, 1.0),
           )

I want to change background color like that. . SO How to change background color of bottomnavigationItem?

Roslan Amir · Answer 1 · 2021-11-15T06:24:37.687

0

BottomNavigationBar has these color arguments:

fixedColor: ...,
backgroundColor: ...,
selectedItemColor: ...,
unselectedItemColor: ...,

and BottomNavigationBarItem has:

backgroundColor: ...,

Maybe you should use them?

UPDATED

I think you can use activeIcon parameter and set it to another image:

BottomNavigationBarItem(
  icon: SvgPicture.asset("assets/icons/tinpay3.svg"),
  activeIcon: SvgPicture.asset("assets/icons/tinpay3_reversed.svg"),
  label: "TINPAY",
  backgroundColor: Color.fromRGBO(255, 194, 44, 1.0),
),

where tinpay3_reversed.svg is the reverse of tinpay3.svg with white letters and colored background.

edited Nov 15 '21 at 06:24

answered Nov 13 '21 at 13:14

Roslan Amir

1,141
8
16

in my exaple as you can see i used background color but it did not work – Brutal Nov 15 '21 at 05:28
You have 3 different styles, whereas `BottomNavigationBar` supports only two: "selected" and "unselected". What is the difference between No 3 and No 4? – Roslan Amir Nov 15 '21 at 06:04
I tried all styles but it only changes text color. – Brutal Nov 16 '21 at 08:15
Have you tried setting the `activeIcon` to another image? – Roslan Amir Nov 17 '21 at 02:55
yes I have and it looked very bad and the image was on center , the rest was white . it did not cover full bottomnavigationITem – Brutal Nov 17 '21 at 07:26
The icon and the image are separate items. I am not sure whether you can turn off the display of the labels and just put the labels as part of the image. Just leave the label argument off. – Roslan Amir Nov 17 '21 at 07:32
I did not use label when setting another image – Brutal Nov 17 '21 at 09:01
Please update your question and put your latest code and show the whole `BottomNavigationBar` creation code. – Roslan Amir Nov 17 '21 at 09:30

How to change background color of bottomnavigationItem?

1 Answers1