Widgets 05 | Icon

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 {
  @override
  _IconState createState() => _IconState();
}

class _IconState extends State<IconPage> {
  @override
  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.

 Icon(
              Icons.ac_unit,
              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.

Constructor

Let's look at its constructor.

Icon(this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  })

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.

textDirection

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).
  rtl,

  /// The text flows from left to right (e.g., English, French).
  ltr,
}

So let's look at an example.

            Icon(
              Icons.chrome_reader_mode,
              size: 200,
              color: GREEN,
              textDirection: TextDirection.ltr,
            ),
            Icon(
              Icons.chrome_reader_mode,
              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.

           Icon(
              Icons.build,
              size: 200,
              color: PURPLE,
              textDirection: TextDirection.ltr,
            ),
            Icon(
              Icons.build,
              size: 200,
              color: BLUE_DEEP,
              textDirection: TextDirection.rtl,
            )

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

Conclusion

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.

PreviousWidgets 04 | Row & ColumnNextWidgets 06 | RaiseButton

Last updated