Icon Widget

This Tutorials is posted by niebin312 at 04-03-2019 05:10:15

What about the Icon, maybe, it is easy, but you need to know.

Before Start

Before starting this tutorial,we should create a page to contain our code. As common, I will create a similar class to write. As follows.

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class IconPage extends StatefulWidget {
_IconState createState() => _IconState();
class _IconState extends State<IconPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(PageName.ICON),
body: SingleChildScrollView(
child: Column(
children: <Widget>[],

It shows nothing, but with a title.

Simple Use

The Icon is a widget, so you can put inside the children list, just as below.

size: 100,
color: RED,

The Icons is defined by the flutter. If you can find them on their official website. You can browse them to choose which one you need. The Icons.ac_unit just use its name, but return IconData.Like this.

static const IconData ac_unit = IconData(0xeb3b, fontFamily: 'MaterialIcons');

The size set the size of the Icon. The color set the color of the Icon.It easy to understand. And It will show as follows.


Let's look at its constructor.

Icon(this.icon, {
Key key,

Its parameters are so less and easy. We have used the icon, size,color above. Just retain semanticLabel and textDirection. The semanticleLabel is designed to describe the widgets, if you design an app for the blind man, you must consider this, when describing this widget, the phone will speak this string to the user.


So let's just talk this parameter. When we look at its definition. We can see this.

final TextDirection textDirection;

It is a TextDirection, if you look at the fore tutorial, you will be very familiar with this class. It controls the direction of the drawing. It has two choices.

enum TextDirection {
/// The text flows from right to left (e.g. Arabic, Hebrew).
/// The text flows from left to right (e.g., English, French).

So let's look at an example.

size: 200,
color: GREEN,
textDirection: TextDirection.ltr,
size: 200,
color: BLUE_DEEP,
textDirection: TextDirection.rtl,

But you should care about that, not every IconData in the Icons can use this as the same effect. Let's see the definition Icons.chrome_reader_modein the Icons.

static const IconData chrome_reader_mode = IconData(0xe86d, fontFamily: 'MaterialIcons', matchTextDirection: true);

So only the matchTextDirection = true can effect when we set the textDirection parameter. Let's see an obverse example.

size: 200,
color: PURPLE,
textDirection: TextDirection.ltr,
size: 200,
color: BLUE_DEEP,
textDirection: TextDirection.rtl,

We want the second one draw from right to left, but we failed.


The Icon is simple to use, the textDirection may be a bit difficult to other parameters. If you don't care about the condition for using the Icons. You may be failed. Good luck

Thanks for your reading!

The end.

Whole code in GitHub,star to support.


Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.

Recent Articles

How to deploy flutter web site on GitHub using peanut

Posted by nikhilchaudhary12155 on 13 Oct 2019 Article

AnimatedPositioned Widget Example in Flutter

Posted by seven.srikanth on 10 Oct 2019 Article

Flutter Open-Source and directory lists

Posted by nishantkotatech on 09 Oct 2019 Article

Flutter Travelling Couple Leading Page - Flutter Web Series 3

Posted by nikhilchaudhary12155 on 05 Oct 2019 Article

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com