Flutter SVG as ImageIcon

Question

My designer has switched from PNG to SVG files, 'cause our icons are to pixelated.

How I can use a SVG as an ImageIcon?.

Previous I have used this for PNG files:

ImageIcon(AssetImage('assets/images/ic_home.png')

I'm using flutter_svg (SvgPicture.asset(item.icon, height: 24, width: 24))

Thank you in advance for your help!

Solution

You actually can't do it as mentioned here by Flutter SVG creator that PictureProvider and ImageProvider are incompatible and ImageIcon needs an ImageProvider.

However, you don't actually need to do it, and you probably won't as well. You can refactor your code to use:

SvgPicture.asset(item.icon, height: 24, width: 24)

And nothing else. That should be enough, no need for more complexity.

Comments

[ruclip]

Thanks for your comment and the link. How is your code example different with mine?

[Miguel Ruivo]

It isn't. I'm just explaining you exactly that you should keep it that way.

[ruclip]

The Problem is I need to tint the icon after creating. (TabBar). For that I need an Icon.

[Miguel Ruivo]

You can wrap your SvgPicture with a ColorFiltered widget for that.

[ruclip]

How will ColorFiltered help? I can also change the color of the SVG direclty (SvgPicture.asset(item.icon, height: 24, width: 24, color: Colors.grey) ). I'm searching some way to do it direclty with TabBar. TabBar( labelColor: AppColors.green, unselectedLabelColor: AppColors.greyDark,);

[Miguel Ruivo]

You can tint your child widget with it.

[ruclip]

I solved the problem with rebuilding widget when tabcontroller index has changed. ``` _tabColorListener = () { if (_tabController.indexIsChanging) setState(() {}); };``` ``` for (int i = 0; i < navigationItems.length; i++) { tabs.add(SizedBox( height: kBottomNavigationBarHeight, child: Tab( icon: SvgPicture.asset(navigationItems[i].icon, height: 24, width: 24, color: i == _tabController.index ? AppColors.green : AppColors.greyDark), ), )); }``` Thanks a lot for your help and ideas @Miguel Ruivo