Filter by Widgets


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.

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.


0 Comments
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

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

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

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.