Quick Tip – How to use ImageIcon in Flutter with examples

What is Flutter ImageIcon

In Flutter, the ImageIcon widget is used to display an image as an icon. It is a subclass of the Icon widget, which means it inherits all of the properties and behaviours of the Icon widget, such as the ability to change the size and colour of the image.

Here’s an example of how you can use the ImageIcon widget in a Flutter app:

ImageIcon(
  AssetImage('assets/images/FlutterAssets_logo.png''),
  size: 48,
  color: Colors.red,
)

This will display the image FlutterAssets_logo.png, which must be stored in the images directory of the Flutter project, and will render the image with a size of 48 pixels and red colour.

Short summary what is Flutter Icon

In Flutter, the Icon widget is used to display an icon in your app. The Icon widget takes in an IconData object, which can be constructed using the Icons class. The Icons class contains a large collection of pre-built icons, such as Material icons and FontAwesome icons.

You can customize the colour and size of the icon. You can also use the Icon widget as a child of other widgets, such as a TextField or a Button, to add an icon to them. It is important to note that the Icon widget is not the only way to display icons in Flutter, you can also use the Image widget to display custom icons or svg icons.

Short summary what is Flutter Image

In Flutter, the Image widget is used to display images in your app, it can be loaded from various sources such as assets, network, or file. You can customize the size, colour and alignment of the image. The Image widget also provides support for caching, fading in images and support for large images.

It’s important to note that the Image widget is not the only way to display images in Flutter, you can also use other widgets such as FadeInImage or CachedNetworkImage to display images from the network with caching.

Why use Image as Icon in Flutter?

Using an image as an Icon in Flutter has several benefits:

1. Icons are small, simple graphics that can be easily recognized and used to represent a specific action or idea. Using an image as an icon allows you to use a custom image that is more meaningful and relevant to your app.
2. Icons are easy to style and customize. You can change the colour, size, and shape of an icon by using various properties and themes in Flutter.
3. Icons can be used in various places throughout your app, such as buttons, menus, and navigation. Using an image as an icon allows you to use the same image consistently throughout your app, which helps to create a cohesive design.
4. Using an image as an icon can help to make your app more visually appealing and engaging for users.

Overall, using an image as an Icon in Flutter can be a useful way to add visual interest and meaning to your app.

Add image to pubspec.yaml in Flutter

To add an image to your Flutter project, you will need to include it in the pubspec.yaml file. This file is used to define the assets that are included in your Flutter project, as well as any dependencies.

To add an image to your pubspec.yaml file, follow these steps:

1. Open the pubspec.yaml file in the root directory of your Flutter project.
2. Under the flutter section, add a new line for the assets key.
3. On the same line as the assets key, specify the path to the image file that you want to include in your project. For example:

flutter:
  assets:
    - assets/images/FlutterAssets_logo.png

4. Save the pubspec.yaml file.
5. Run the flutter pub get command to fetch the assets and update the project dependencies.

Once you have added the image to your pubspec.yaml file and run the flutter pub get command, you should be able to use the image in your Flutter app by accessing it using an AssetImage object. For example:

Image(
  image: AssetImage('assets/images/FlutterAssets_logo.png'),
)

How to use Flutter ImageIcon

AssetImage as ImageIcon in Flutter

ImageIcon(
  AssetImage('assets/images/FlutterAssets_logo.png'),
  size: 48.0,
  color: Colors.green,
)

The ImageIcon widget takes an ImageProvider as its first argument, which is used to load the image. In this example, we are using the AssetImage class to load an image from the images directory in the project’s assets. You can also use other ImageProvider classes such as NetworkImage to load an image from a URL.

The size parameter is used to specify the size of the icon, and the color parameter is used to specify the colour of the icon.

To use an image as the ImageIcon the image should be transparent. If you use a simple .jpg the image will be rendered as a square.

Here is an example of how you can use an ImageIcon in a Flutter app:

ImageIcon(
  image: AssetImage('my_icon.png'),
)

In this example, the ImageIcon widget is being used to display an image called my_icon.png which is stored in the assets folder of the Flutter project.

You can customize the appearance and behaviour of the ImageIcon by using various properties and themes. For example, you can change the size of the icon using the size property, or change the colour of the icon using the color property.

Here is an example of an ImageIcon with some additional customization:

ImageIcon(
  image: AssetImage('assets/my_icon.png'),
  size: 40,
  color: Colors.red,
)

In this example, the ImageIcon is being displayed at a size of 40 pixels and with a red colour.

You can use the ImageIcon widget in various places in your Flutter app, such as buttons, menus, and navigation. It can be a useful way to add visual interest and meaning to your app.

What is Flutter NetworkImage

In Flutter, the NetworkImage class is used to load an image from a network location. The class takes in a URL of the image as its constructor argument. Once the image is loaded, it can be used as the image property of the Image widget to display the image.

Here’s an example of how you would use the NetworkImage class to load an image from a network location and display it in an Image widget:

Image(
  image: NetworkImage('https://example.com/image.png'),
)

NetworkImage as ImageIcon in Flutter

Here is an example of how you can use an ImageIcon with a NetworkImage in Flutter:

ImageIcon(
  image: NetworkImage('https://example.com/my_icon.png'),
)

In this example, the ImageIcon widget is being used to display an image from a URL. The image is being fetched from the network and displayed as the icon.

You can customize the appearance and behaviour of the ImageIcon by using various properties and themes. For example, you can change the size of the icon using the size property, or change the colour of the icon using the color property.

Here is an example of an ImageIcon with some additional customization:

ImageIcon(
  image: NetworkImage('https://example.com/my_icon.png'),
  size: 40,
  color: Colors.red,
)

In this example, the ImageIcon is being displayed at a size of 40 pixels and with a red colour.

You can use the ImageIcon widget in various places in your Flutter app, such as buttons, menus, and navigation. It can be a useful way to add visual interest and meaning to your app.

Here is another example:

      bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/images/FlutterAssets_logo.png'),
              size: 50,
              color: Colors.redAccent,
            ),
            label: 'ImageIcon icon 1'
        ),
        BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/images/FlutterAssets_logo.png'),
              size: 50,
              color: Colors.green,
            ),
            label: 'ImageIcon icon 2'
        ),
        BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/images/FlutterAssets_logo.png'),
              size: 50,
              color: Colors.blue,
            ),
            label: 'ImageIcon icon 3'
        ),
      ],

      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: ImageIcon(
          AssetImage('assets/images/FlutterAssets_logo.png'),
          size: 50,
          color: Colors.yellow,
        )
      ),

This code is defining two parts of a Flutter app’s user interface: a BottomNavigationBar and a FloatingActionButton.

The BottomNavigationBar is a widget that is displayed at the bottom of the screen and allows the user to navigate between different pages or sections of the app. It consists of three items, each of which is an instance of the BottomNavigationBarItem class. Each of these items has an ImageIcon as its icon and a label. The ImageIcon is being displayed at a size of 50 pixels and with a different colour for each item.

The FloatingActionButton is a button that is displayed in the bottom right corner of the screen and is typically used to perform a primary action in the app. It has an ImageIcon as its child and is also being displayed at a size of 50 pixels and with a yellow colour. When the user clicks the button, the _incrementCounter function is called.

How to customize Flutter ImageIcon

To customize an ImageIcon in Flutter, you can use the various properties and themes available in the Icon and Image classes. Some common ways to customize an ImageIcon include:

1. Changing the size: You can use the size property to change the size of the ImageIcon. For example:

ImageIcon(
  image: AssetImage('my_icon.png'),
  size: 40,
)

2. Changing the colour: You can use the color property to change the colour of the ImageIcon. For example:

ImageIcon(
  image: AssetImage('my_icon.png'),
  color: Colors.red,
)

3. Adding a semantic label: You can use the semanticLabel property to add a label to the ImageIcon that can be read by screen readers. For example:

ImageIcon(
  image: AssetImage('my_icon.png'),
  semanticLabel: 'Home icon',
)

Flutter ImageIcon background colour

Here is an example of how you can display an ImageIcon inside a container in a circular shape and change the background colour in Flutter:

Container(
  padding: EdgeInsets.all(10),
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.black26,
  ),
  child: ImageIcon(
    AssetImage('assets/logo.png'),
    size: 50,
    color: Colors.red,
  ),
)

In this example, a Container widget is being used to draw a circular shape on the screen. The ImageIcon is being displayed as the child of the Container and is being displayed at a size of 50 pixels and with a red colour with the grey background colour.

You can customize the appearance of the circular container by using various properties and themes in the BoxDecoration class. For example, you can change the colour of the container using the color property, or add a border to the container using the border property.

Here is an example of a customized circular container:

Container(
  padding: EdgeInsets.all(10),
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.black26,
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
  ),
  child: ImageIcon(
    AssetImage('assets/logo.png'),
    size: 50,
    color: Colors.red,
  ),
)

In this example, the circular container has a blue border with a width of 2 pixels.

Flutter ImageIcon shadow

Flutter Container shadow

Here is an example of how you can add a shadow to an ImageIcon in Flutter:

Container(
  padding: EdgeInsets.all(10),
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.grey,
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
    boxShadow: const [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 5,
        offset: Offset(5, 5),
      ),
    ],
  ),
  child: const ImageIcon(
    AssetImage('assets/logo.png'),
    size: 120,
    color: Colors.red,
  )
),

In this example, a Container widget is being used to add a shadow to the ImageIcon. The BoxDecoration class is being used to define the shadow properties, including the shadow colour, blur radius, and offset.

You can customize the appearance of the shadow by using various properties and themes in the BoxShadow class. For example, you can change the colour of the shadow using the color property, or change the blur radius using the blurRadius property.

Flutter Stack shadow

Here is an example of how you can use a Stack widget to display two ImageIcons, one of which is the shadow of the other:

Stack(
  children: [
    Positioned(
      left: 4,
      top: 8,
      child: ImageIcon(
        AssetImage('assets/logo.png'),
        size: 150,
        color: Colors.grey[800],
      ),
    ),
    ImageIcon(
      AssetImage('assets/logo.png'),
      size: 150,
      color: Colors.red,
    ),
  ],
)

In this example, the Stack widget is being used to overlap two ImageIcons on top of each other. The first ImageIcon is being displayed with a red colour, and the second ImageIcon is being displayed with a grey colour and is slightly offset from the first ImageIcon using the Positioned widget.

The Stack widget allows you to overlap and position widgets on top of each other. The Positioned widget allows you to specify the position of a widget within a Stack.

You can customize the appearance and behaviour of the Stack and Positioned widgets by using various properties and themes. For example, you can change the size of the ImageIcons using the size property, or change the colour of the shadow ImageIcon using the color property.

Here is another example with Stack shadow in the Container:

Container(
  padding: EdgeInsets.all(10),
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.grey,
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
  ),
  child: Stack(
    children: [
      Positioned(
        left: 3,
        top: 6,
        child: ImageIcon(
          AssetImage('assets/logo.png'),
          size: 120,
          color: Colors.grey[800],
        ),
      ),
      ImageIcon(
        AssetImage('assets/logo.png'),
        size: 120,
        color: Colors.red,
      ),
    ],
  )
),

Where I can use ImageIcon in the Flutter app?

You can use the ImageIcon widget anywhere in your Flutter app where you want to display an icon that consists of an image. Some common places where you might use ImageIcon include:

• As the icon for a TextButton, ElevatedButton, or other button widgets
• As the icon for a Tab in a TabBar
• As the icon for a ListTile in a ListView
• As the icon for a BottomNavigationBarItem in a BottomNavigationBar
• As the icon for a PopupMenuItem in a PopupMenuButton

Here is an example of using ImageIcon as the icon for a TextButton:

TextButton.icon(
  onPressed: () {
    // button logic
  },
  icon: ImageIcon(
    AssetImage('assets/images/FlutterAssets_logo.png'),
    size: 24.0,
  ),
  label: Text('Button'),
)

You can use the ImageIcon widget in any of these and other contexts by simply including it in the relevant widget’s icon parameter.

Keep in mind that ImageIcon is just one of many ways to display an icon in Flutter. You can also use other icon widgets such as Icon or Chip to display an icon in your app.

You can read more about images in this post: Flutter Basics – How to use an image in Flutter