How to use an image instead of an icon in flutter?

Question

I am currently doing something like this

new Tab(icon: new Icon(Icons.arrow_forward), text: "Browse"),

However I would like to use an image as an icon . I get images using

new Image.asset("assets/img/logo.png"),

My question is how can i use that image as an icon in my tab shown above ?

Answer 1

As per documentation Tab icon property ask a widget so you can pass like this also or any other widget also

new Tab(icon: new Image.asset("assets/img/logo.png"), text: "Browse"),

Answer 2

ImageIcon widget is the most suitable widget to use images as icons in Flutter. You can use its property image to assign your own image.

ImageIcon(
     AssetImage("images/icon.png"),
     color: Colors.red,
     size: 24,
),

Answer 3

Most of the time you'll find that the underling icon property is a Widget, so you can directly replace your Icon with Image.asset and provide it a width, height and fit according to your needs:

Image.asset(
  'assets/images/foo.png',
  width: 44,
  height: 44,
  fit: BoxFit.cover,
)

Example (in a TabBar)

TabBar(
  tabs: [
    Tab(
      text: 'Icon',
      icon: Icon(Icons.call), //    <-- Icon
    ),
    Tab(
      text: 'Image',
      icon: Image.asset( //        <-- Image
        'assets/images/foo.png',
        height: 44,
        fit: BoxFit.cover,
      ),
    ),
  ],
)

Answer 4

So follow up to @RobinSinha answer, using the Tab widget looks weirds as the Tab widget has an external padding, so i'd suggest to avoid that:

BottomNavigationBarItem(
       icon: Image.asset(
           "assets/images/image.png",
            width: <put your desired width, recommended 24.0>,
            height: <put your desired width, recommended 24.0>,
           ),
        label: '<name for icon>'
),

Answer 5

Little known fact. We can use PNG files in Flutter as an icon and change their color with color parameter like below:

 IconButton(
                        icon: ImageIcon(
                          AssetImage('assets/images/iconRandom.png'),
                          size: 30,
                          color: Colors.red,
                        ),
                        onPressed: () {
                          // do something here
                        }),

So no need to create several different image files just for changing colors depending on condition. We can just change color of the PNG file.

Answer 6

As @RobinSinha has said you can use Tab and then in for icon you can try the following

Tab(
        icon: Container(
          child: Image(
            image: AssetImage(
              'assets/logo.png',
            ),
            fit: BoxFit.cover,
          ),
          height: 100,
          width: 100,
        ),
      )