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.
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_mode
in 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.