title: How to change icon on TabItem on currentTab
body: <p>I have a BottomNavigationBar which works perfectly with color change on active and inactive but I don't want to change color but change icons on active and inactive with SVG image. Below is my code:</p>
  <pre><code>class AppNavigation extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() =&gt; AppState();
  }
  
  const assetHome = 'assets/home_off.svg';
  const assetRedemptions = 'assets/redeemed_off.svg';
  const assetProfile = 'assets/profile_off.svg';
  
  
  const assetHome1 = 'assets/home_on.svg';
  const assetRedemptions1 = 'assets/redeemed_on.svg';
  const assetProfile1 = 'assets/profile_on.svg';
  
  
  class AppState extends State&lt;AppNavigation&gt; {
   
    static int currentTab = 0;
  
   // list tabs here
    final List&lt;TabItem&gt; tabs = [
      TabItem(
        tabName: &quot;Home&quot;,
        icon: Icons.home,
        page: MyDealApp(),
      ),
      TabItem(
        tabName: &quot;Announcement&quot;,
        icon: Icons.announcement,
        page: MyRedemptionApp(),
      ),
      TabItem(
        tabName: &quot;Notification&quot;,
        icon: Icons.notifications,
        page: MyProfileApp(),
      ),
    ];
  
    AppState() {
      tabs.asMap().forEach((index, details) {
        details.setIndex(index);
      });
    }
  
    void _selectTab(int index) {
      if (index == currentTab) {
        tabs[index].key.currentState.popUntil((route) =&gt; route.isFirst);
     
      } else {
        setState(() =&gt; currentTab = index);
        debugPrint(&quot;currentTabber:$currentTab&quot;);
      }
    }
  
    @override
    Widget build(BuildContext context) {
      // WillPopScope handle android back btn
      return WillPopScope(
        onWillPop: () async {
          final isFirstRouteInCurrentTab =
          !await tabs[currentTab].key.currentState.maybePop();
          if (isFirstRouteInCurrentTab) {
            // if not on the 'main' tab
            if (currentTab != 0) {
              // select 'main' tab
              _selectTab(0);
              // back button handled by app
              return false;
            }
          }
          return isFirstRouteInCurrentTab;
        },
        child: Scaffold(
          // indexed stack shows only one child
          body: IndexedStack(
            index: currentTab,
            children: tabs.map((e) =&gt; e.page).toList(),
          ),
          // Bottom navigation
          bottomNavigationBar: BottomNavigation(
            onSelectTab: _selectTab,
            tabs: tabs,
          ),
        ),
      );
    }
  }
  
  class TabItem {
    // you can customize what kind of information is needed
    // for each tab
    final String tabName;
    final IconData icon;
    final GlobalKey&lt;NavigatorState&gt; key = GlobalKey&lt;NavigatorState&gt;();
    int _index = 0;
    Widget _page;
  
    TabItem({
      @required this.tabName,
      @required this.icon,
      @required Widget page,
    }) {
      _page = page;
    }
  
    void setIndex(int i) {
      _index = i;
    }
  
    int getIndex() =&gt; _index;
  
    Widget get page {
      return Visibility(
        // only paint this page when currentTab is active
        visible: _index == AppState.currentTab,
        // important to preserve state while switching between tabs
        maintainState: true,
        child: Navigator(
          // key tracks state changes
          key: key,
          onGenerateRoute: (routeSettings) {
            return MaterialPageRoute(
              builder: (_) =&gt; _page,
            );
          },
        ),
      );
    }
  }
  
  class BottomNavigation extends StatelessWidget {
    BottomNavigation({
      this.onSelectTab,
      this.tabs,
    });
  
    final ValueChanged&lt;int&gt; onSelectTab;
    final List&lt;TabItem&gt; tabs;
  
    @override
    Widget build(BuildContext context) {
      return BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: tabs
            .map(
              (e) =&gt; _buildItem(
            index: e.getIndex(),
            icon: e.icon,
            tabName: e.tabName,
          ),
        )
            .toList(),
        onTap: (index) =&gt; onSelectTab(
          index,
        ),
      );
    }
  
    BottomNavigationBarItem _buildItem(
        {int index, IconData icon, String tabName}) {
      return BottomNavigationBarItem(
        icon: Icon(
          icon,
          color: _tabColor(index: index),
        ),
        title: Text(
          tabName,
          style: TextStyle(
            color: _tabColor(index: index),
            fontSize: 12,
          ),
        ),
      );
    }
  
    Color _tabColor({int index}) {
      return AppState.currentTab == index ? colorGreen : Colors.grey;
    }
  
   }
  </code></pre>
  <p>As you can see
  <code>_tabColor</code> switch from color from blue to grey on active and inactive but rather I want a switch in icon with declared SVG images above. <code>assetHome</code> for <code>MyDealApp()</code> when it is active and <code>assetHome1</code> for <code>MyDealApp()</code> when it is inactive, <code>assetRedemptions</code> for <code>MyRedemptionApp()</code> when it is active and <code>assetRedemptions1</code> for <code>MyRedemptionApp()</code> when it is inactive and finally <code>assetProfile</code> for <code>MyProfileApp()</code> when it is active and <code>assetProfile1</code> for <code>MyProfileApp()</code> when it is inactive.</p>
  <p><a href="https://i.stack.imgur.com/urIti.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/urIti.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/dVwgc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dVwgc.png" alt="enter image description here" /></a></p>