CODEWITHSUNDEEP
fluttericonsflutter-layoutflutter-dependencies
Aiman_Irfan
Aiman_Irfan

Reputation: 375

How to change SVG icon in bottom nav bar in Flutter?

I am trying to change my SVG icon color when being tapped. I have tried the selectedColor but the icon did not change the color. So I am trying to use shortcut if...else statement but I still did not got to change the color.

Here is the code:

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/dashboard-outline.svg', width: 25),
              label: 'Dashboard'
          ),
          BottomNavigationBarItem(
            icon: SvgPicture.asset('assets/tank-outline.svg', color: Colors.black54, width: 30),
            label: 'Tanks',
          ),
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/activity-outline.svg', width: 18),
              label: 'Activity'
          ),
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/account-outline.svg', width: 20),
              label: 'Account'
          ),
        ],
        currentIndex: _index,
        onTap: _onItemTapped,
        selectedItemColor: Color.fromRGBO(0,99,183,1)
      ),

I have a different file for SVG picture icon to change it when being tapped.

Here is the code that i was trying:

bool onSelected = true;

  Widget build(BuildContext context) {
    return Scaffold(
      body: _myPages[_index],

      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: SvgPicture.asset(onSelected == false ? 'assets/dashboard-outline.svg' : 'assets/dashboard-fill.svg', width: 25),
              label: 'Dashboard'
          ),

Any help would be appreciated.

Upvotes: 3

Views: 5739

Answers (1)

user14870151
user14870151

Reputation:

You can just change your items do validate this property to define the correct color:

 SvgPicture.asset(
 'assets/dashboard-outline.svg', 
  width: 25), 
  color: _currentIndex == 0 ? Colors.red : Colors.black,

Upvotes: 6

Related Questions