Skip to main content

Flutter Icon Developer Guide

This guide will help you implementing icons in your flutter app.
You will also learn some basics about color channels, alpha channel(transparency) etc.
In this guide will learn how to use :
  • Flutter Icon Class (also known as Icon Widget) and Icons Class
  • Flutter ImageIcon Class and AssetImage Class
flutter icon developer guide

How to use Flutter Icon Widget  or Flutter Icon Class ?

Let us start with the simplest way to implement icons in flutter.
Icon Class - Documentation
Also refer official class documentation with this guide to deeply understand the concept.

Icon Class Constructor

Icon(IconData icon, { Key key, double size, Color color, String semanticLabel, TextDirection textDirection })
  • Create a child widget of Icon class
Now, To get the IconData, Use Material Icons Class - Documentation

In the below screenshot, we can clearly see that IntelliSense auto-completion recommends us a list of icons present in the Icons Class.
To know more about VS Code IntelliSense - Docs

Flutter - Icons Class
Flutter - Icons Class
"info" icon selected for this demo guide

Flutter - Icon Class
Flutter - Icon Class
Flutter UI Output
Flutter Info Icon UI
Flutter Info Icon UI

We can also change different properties like color,size, semantic label and text direction
Icon class properties
  • icon : IconData  [required]
  • color
  • size
  • semantic label
  • textDirection
what is semantic label ?
  • The text which will be announced in accessibility modes (eg. TalkBack/VoiceOver).
  • This label will not be shown in the UI.
Flutter Semantic Label Icon
Flutter Semantic Label Icon
Flutter UI Output

Flutter Icon Demo
Flutter Icon Demo
Recommended icon sizes(double value) are 15.0, 20.0, 25.0 and 50.0
This is the simplest way to implement icons in flutter app using Icon Class and Icons Class

How to use ImageIcon Class ?

Using this class (ImageIcon class) we can use our own custom designed images as icons in our flutter app.
ImageIcon Class Widget - Documentation
Also refer official class documentation with this guide to deeply understand the concept.

step 1: let us add our custom images to our flutter project

  • Create assets folder in your project directory
  • We have added two images into assets folder for this demo guide.
  • You may add images required for your project
Flutter Image Assets
Image Assets
Also, add the image assets to your application using pubspec.yaml file
Flutter pubspec.yaml
Flutter pubspec.yaml

step 2 : Alpha Channel (Transparency) 

Let us first understand basics of image - color channels
Images have 4 color channels
  • Red Channel
  • Green Channel
  • Blue Channel
  • Alpha Channel (Transparency) 
To use ImageIcon, we must have transparency - alpha channel in our custom images.

  • Use PNG images with alpha(transparency).
  • Do not use JPEG(.jpeg,jpg) as it does not support transparency.

We have added two images to our project, in step 1
Image One : Image with white background named bluetruck.png

Image with white background
Image with white background
Image Two : Image with  transparent background - bluetruck alpha.png
Image with transparent background
Image with transparent background

step 3 : Let us understand this with an example that why we must have transparency - alpha channel in our images

To implement the ImageIcon class, lets start with the ImageIcon class constructor

ImageIcon Constructor 
ImageIcon(ImageProvider image, { Key key, double size, Color color, String semanticLabel })

In this case we do not have any IconData so we cannot use the Icons Class, instead we have ImageProvider. 

for ImageProvider, use AssetImage class - AssetImage Class Docs
Use AssetImage class to get your Image. 

Create a child widget named AssetImage and pass the relative image path

Case One : We use the image with white background (bluetruck.png)

Flutter AssetImage White Background
AssetImage White Background

Flutter AssetImage White Background UI
Flutter AssetImage White Background UI

We get a square box of red color because ImageIcon class traces and paints the icon borders.With a white background image it traces the complete square image path and paints it red as we have set color property as red.

But, this is not the desired result.

Case Two : We use the image with the transparent background (bluetruck alpha.png)

Flutter AssetImage Transparent Background
Flutter AssetImage Transparent Background

Flutter AssetImage Transparent Background UI
Flutter AssetImage Transparent Background UI

Now, with the transparent background image we get the desired UI output of a truck icon using our custom image

We can also change different properties like color,size, semantic label

Change Color to Green
Flutter ImageIcon Green
Flutter ImageIcon Green

Flutter ImageIcon Green UI
Flutter ImageIcon Green UI
Change icon size 
Flutter ImageIcon Size
Flutter ImageIcon Size

Flutter ImageIcon Size UI
Flutter ImageIcon Size UI

Using ImageIcon Class we can use our custom image icons.
This is how we can implement icons in flutter app using ImageIcon Class and AssetImage Class.

Coding - Sample Flutter App Code

Bonus Tip : There is one more class for Interactive icons named - IconButton
But, we will cover IconButton class in the our flutter button developer guide
To learn more about flutter - Flutter Developer Guide

Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited.The materials(images, logos, content) contained in this web site are protected by applicable copyright and trade mark law.

Flutter, Android and the Android logo are registered trademarks of Google LLC.

Popular posts from this blog

Step-by-Step Guide to create a new flutter project using Visual Studio Code [VS Code]

This is a beginner's guide to visual studio code and flutter. VS Code is a light weight editor with flutter app development, execution and debug support. Visual Studio Code is a source-code editor developed by Microsoft. Install latest stable version of VS Code Install the Flutter and Dart plugins In VS Code "Extensions" Tab, search field type flutter, select "Flutter" in the list and click "Install". Flutter plugin also installs the required Dart plugin. Validate your flutter setup using "flutter doctor command". Once Flutter SDK and your VS Code Editor is up and running, Flutter Visual Studio Code To Create a new flutter project from the flutter starter app template follow the below steps step 1 : Open Command Palette Use Shortcut key - Ctrl+Shift+P or Cmd+Shift+P on macOS OR Go to View Menu, select "Command Palette" VS Code Command Palette step 2 : Create Flutter New Project Sele

Step-by-Step Guide for Flutter Android APK Signing and Release

In this guide we will learn how to sign the release version of apk or aab(android app bundle) to publish our flutter app to android play store. flutter release apk How to sign the apk or app bundle created using flutter ? To publish your app on Play Store, you need to give your app a digital signature. step 1 : Create a new keystore file ; if you have an existing keystore , skip this step Run command in your terminal for linux/mac keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key On Windows, use the following command: keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key Fill in the required info inside the terminal Enter keystore password: test@12345 Re-enter new password: test@12345 What is your first and last name? [test]: test What is the name of your organizational unit? [test]: test

Step-by-Step Guide to take a App Screenshot with the Device Frame using Android Studio

This guide will help you to take a screenshot with the device frame using android studio. If we capture screenshot using the default android emulator "Capture Screenshot" option, then screenshot will not have the device frame. Android Emulator - Screen Capture By using android studio we can capture screenshot with different devices frame. How to take a App Screenshot with the Device Frame using Android Studio step 1 : Load your project in android studio and run the app Open Android Studio Load your android app project in android studio.  Build and Run your app using android emulator or a connected physical device.  If you are using a physical device make sure that you have enabled USB DEBUGGING option. Android Studio - Load Project step 2 : Open Logcat in Android Studio Check out bottom left corner in android studio to find Logcat option and click to open Logcat If it is not visible then select "View Menu" and search for