Flutter Icon DeepDive — Analyzing Widgets
--
Icon, one of the most frequently used widgets in Flutter, because they offer so many new design possibilities. In this article, we’ll take a look at all the parameters of the Icon widget to understand it properly.
Icons
The icon widget also needs an icon to display. Therefore, a variable named “icon” of type IconData is the first thing you add. Using Icons.<your icon> you have a huge selection of Material Design icons at your disposal. But, what is IconData anyway and what makes this Icons Class?
IconData is relatively complex, but to put it simply, it creates the icon data, who would have thought it. But, IconData is very rarely used alone. Rather, the Icons class is used and we’ll look at this one in more detail now.
This class is also very easy to understand.
There are thousands of variables defined, which you can use later in Icons.add. The add variable looks like this:
Okay, fontFamily should be self-explanatory. It takes the icon from the font family “MaterialIcons”. But, what does this weird code mean?
It’s a Unicode code that “points” to the point where the icon is stored in the font (MaterialIcons). Where this is, of course, depends on the font that is used.
Color
This should be self-explanatory. Here you can specify the color that the icon should have. We will look at how the Color class works in another episode of this series.
Semantic Label
So, now we come to a part that is very rarely used.
But to know why this is so rarely used, we first need to ask what Semantic Label is, because then the real question will be answered right away.
Semantic is like a comment for the widget, which describes what the widget is for. But, what is the use of it?
Such a semantic label is very useful for SEO optimization. A crawler, for example Google’s crawler, finds this Semantic Label and can deduce from this text what this widget does (and in general the website).
Here is an example when adding a new transaction for example:
Size
I think the name pretty much says it all. But wait, how is the size determined? Is it by font size or by pixels? Well, it’s simple: If you specify a size of 40, your icon is a square (like any icon). Then Flutter scales this icon to 40 pixels height and 40 pixels width. So that’s it from the Size, that’s all you need to know there.
Key
Basically, keys are used to specify the exact size of a widget.
But keys are a bit more complicated and if you really want to understand what is going on there and when you should use a key, you can find out here:
https://www.raywenderlich.com/22416843-unlocking-your-flutter-widgets-with-keys
TextDirection
I haven’t used TextDirection in an icon yet, but here is a little explanation:
There are two types of TextDirection. One is left to right (ltr) and the other is right to left (rtl). For example, if you have an arrow-back icon, then with ltr it will be displayed normally, but with rtl it will be an arrow forward because the reading direction has been changed.
Useless for me, maybe useful for others if they use an icon that says text.
Conclusion
That’s it, with the DeepDive into the icon widget. I hope I could help you to better understand this often used widget and wish you good luck, in your future Flutter career!
Thanks for reading!
