How to use png files as icons in a Flutter app?

Question

To be able to use my icons, I upload them to fluttericon.com but it only accepts svg files. Since my icons are in .png format, I'm using a converter to convert them into svg. After the conversion, I upload them but it seems like they are not identified correctly by fluttericon.com, yet I'm unable to see icons on the app.

There is a custom bottom navigation bar in my app and it only accepts iconData as argument. So I have to use an actual icon. I tried using the custom icon on AppBar to be able know if it's bottom navigation bar causing the problem but it's same.

I read some comments saying the content of svg matters. Cause when I download a random icon in svg format directly and upload it, it's identified properly on fluttericon.com. What do I need to do?

Answer 1

Use icon: Image.asset("assets/home.png")

full code example:

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar>  with TickerProviderStateMixin {
  int tabIndex=0;



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: tabIndex ==0 ?BottomTabBarHome() 
        :tabIndex == 1? BottomTabBarMail(): BottomTabBarProfile()
      ),

      bottomNavigationBar: BottomNavigationBar(
        items:  <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Image.asset("assets/home.png", color: Colors.grey,),
            activeIcon: Image.asset("assets/home.png", color: Colors.blue,),
            title: Text('')
          ),
           BottomNavigationBarItem(
            icon: Image.asset("assets/mail.png", color: Colors.grey,),
            activeIcon: Image.asset("assets/mail.png", color: Colors.blue,),
            title: Text('')
          ),
           BottomNavigationBarItem(
            icon: Image.asset("assets/account.png", color: Colors.grey,),
            activeIcon: Image.asset("assets/account.png", color: Colors.blue,),
            title: Text('')
          )
        ],
        currentIndex: tabIndex,
        selectedItemColor: Colors.blueAccent,
        onTap: (int index){
          setState(() {
            tabIndex = index;
          });
        },
      ),
    );
  }

}

class BottomTabBarHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(" Home Screen"),
      ),
    );
  }
}
class BottomTabBarMail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Mail Screen"),
      ),
    );
  }
}
class BottomTabBarProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(" Profile Screen"),
      ),
    );
  }
}

Answer 2

pulled some code from my old project:

basic idea is that the icon or activeIcon named parameter asks for a Widget, includes but not limited to an Icon widget.

            BottomNavigationBarItem(
              title: Text('REALTIME SCHEDULE'),
              activeIcon: TrackIcon(colorValue: Colors.white70),
              icon: TrackIcon(colorValue: Color(0xff424150)),
            ),

class TrackIcon extends StatelessWidget {
  final Color colorValue;
  TrackIcon({@required this.colorValue});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 33,
      width: 99,
      child: Image.asset(
        'images/track_icon.png',
        height: 25,
        color: colorValue,
      ),
    );
  }
}

Answer 3

As the above answers are useful (with just a few lines of edit), let me simplify

Use this line of code for using you PNG icons

icon: Image.asset("assets/home.png", color: Colors.grey,)

Now go to the folder containing the files of your flutter package for bottomNavigationBar and either edit the package itself OR copy the files into a folder flutterApp/packages/your_package/[those dart files] (second option is better to test with hot reload).

Note: flutterApp is the root folder of your flutter app.

Note: If you decided to edit the package itself in flutter/.pub-cache/hosted/... then you have to stop and re-run the debugging session after each edit for it to take effect.

Note: If you decided to copy the package files in your flutterApp then add them in your pubspecs.yaml as

dependencies:
  your_package:
    path: packages/your_package

Now, what to edit?

Find the constructor parameter icon or whatever it is. Now change its type from IconData (mostly) to Widget and now find the usage with simple searching/looking for the keyword and adjust/fit in the changed icon parameter as a Widget.

for example, if the usage looks something like this:

Icon(
  widget.icon,
  ...
),

change it to:

widget.icon

because Icon() is also a widget which used the earlier IconData widget.icon and as we have converted that to Widget itself we can simply use widget.icon instead of Icon().

Answer 4

Here's how I used my png images as icons:

icon: const ImageIcon(
          AssetImage('assets/image.png'),
        ),

It worked perfectly for me :).