Flutter - Using ImageIcon Widget Examples

This tutorial shows you how to use ImageIcon widget in Flutter.

In Flutter, you can create an icon from an image by using a widget called ImageIcon. You only need to provide an instance of ImageProvider such as AssetImage, NetworkImage, MemoryImage, and ResizeImage. This tutorial shows you the examples of how to use Flutter's ImageIcon widget and how to customize the size and the color of the icon.

Using ImageIcon Examples

For creating an ImageIcon, you need to call the constructor

  const ImageIcon(
    this.image, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
  })

You are only required to pass the image. All named parameters are optional.

Setting Image to be Displayed

To set the image to be displayed as the icon, you need to pass an ImageProvider instance. For that purpose, you need to create an instance of any class that's a descendant of ImageProvider such as AssetImage, NetworkImage, MemoryImage, and ResizeImage. The below example uses AssetImage to load the image. Assuming you have copy and load the image in pubspec.yaml, creating an ImageIcon from an image asset is as simple as the following code.

  ImageIcon(
    AssetImage('assets/images/pikachu.png'),
  )

Output:

Flutter - ImageIcon - Basic

 

Setting Size

By default, the size of the icon depends on the IconTheme's size. If there is no IconTheme or explicit size, it will use 24.0 as the default size. If you want to make the icon looks bigger or smaller, just pass size argument with your desired value.

  ImageIcon(
    AssetImage('assets/images/pikachu.png'),
    size: 150,
  )

Output:

Flutter - ImageIcon - Size

 

Setting Color

As for the icon color, by default it uses IconTheme's color. If there is no IconTheme, the icon will not be recolorized. If you want to use a different color, just set the color you want as color argument

  ImageIcon(
    AssetImage('assets/images/pikachu.png'),
    size: 150,
    color: Colors.yellow,
  )

Output:

Flutter - ImageIcon - Color

 

ImageIcon Properties

  • Key key: The widget key, used to control if it should be replaced.
  • Color color: The color for drawing the icon.
  • ImageProvider image: The image to be used as icon.
  • String semanticLabels: Semantic label for the icon.
  • double size: The size of the icon.

 

You can also read about: