Flutter Icon Developer Guide

  • Flutter Icon Class (also known as Icon Widget) and Icons Class
  • Flutter ImageIcon Class and AssetImage Class
Flutter Icon Developer Guide
Flutter Icon Developer Guide

How to use Flutter Icon Widget or Flutter Icon Class ?

Icon Class Constructor

Icon(IconData icon, { Key key, double size, Color color, String semanticLabel, TextDirection textDirection })
Flutter - Icons Class
Flutter - Icons Class
Info Icon
Info Icon
Flutter Info Icon UI
Flutter Info Icon UI
  • icon : IconData [required]
  • color
  • size
  • semantic label
  • textDirection
  • The text which will be announced in accessibility modes (example, TalkBack/VoiceOver).
  • This label will not be shown in the UI.
Flutter Semantic Label Icon
Flutter Semantic Label Icon
Flutter Icon Demo
Flutter Icon Demo

How to use ImageIcon Class ?

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
Image Assets
Image Assets
Flutter pubspec.yaml
Flutter pubspec.yaml

step 2 : Alpha Channel (Transparency)

  • Red Channel
  • Green Channel
  • Blue Channel
  • Alpha Channel (Transparency)

Note

  • Use PNG images with alpha(transparency).
  • Do not use JPEG(.jpg or .jpeg) as it does not support transparency.
Image with white background
Image with white background
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

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

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

AssetImage White Background
AssetImage White Background
Flutter AssetImage White Background UI
Flutter AssetImage White Background UI

Note

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

Note

Image Icon Class properties

  1. Change Icon Color to Green
Flutter ImageIcon Green
Flutter ImageIcon Green
Flutter ImageIcon Green UI
Flutter ImageIcon Green UI
Flutter ImageIcon Size
Flutter ImageIcon Size
Flutter ImageIcon Size UI
Flutter ImageIcon Size UI

Coding : Sample Flutter App Code

Useful Resources

--

--

--

Helping designers and developers build high quality websites and cross platform mobile apps with our step-by-step developer guides 📚 at akshatapp.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Moving from the Moore’s Law to “Bezos Law”

Deploying Smart Contracts like a Pro!!!

Converting Microsoft SQL Server Schema to Snowflake — Roboquery

MacBook Pro for System Administrators, how to setting up macOS Catalina 10.15

FIFA 22, DCE was Flash Tots 1 Décai 1 solution

TryHackme ConvertMyVideo Writeup: Command Injection on POST request

How to preare for the AWS Certified Solutions Architect — Professional 2019 (SAP-C01) Exam

6.1) App Screen 3 “View Analytics” for Expense Tracker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AkshatApp

AkshatApp

Helping designers and developers build high quality websites and cross platform mobile apps with our step-by-step developer guides 📚 at akshatapp.com

More from Medium

Understanding Dart Null-Safety — Dart Programming — Part 7

Flutter vs Native. Which one you should choose?

Flutter: Upskilling to Flutter and Dart

The InheritedWidget