Flutter Icons | Easiest Widget in Flutter

Flutter Icons | Easiest Widget in Flutter

Flutter Icons is the primary way of introducing Icons in Flutter. Flutter does its own rendering of these icons instead of the usual Android’s way of importing assets as part of the App project itself. Instead, it takes the difficult route and draws these icons on the canvas. This way it creates better control over the different screen sizes, types that the Icons can be rendered on.

In this article, we will take a deeper look into how to create these Flutter Icons, using the Icon Widget and lot more. The best way to use the material icons in Flutter(Material design is rather a lengthier process when it comes to other technologies) is to create the Icons in house and that’s what Flutter does.

To use this class, make sure you set uses-material-design: true in your project’s pubspec.yaml file in the flutter section. This ensures that the MaterialIcons font is included in your application. This font is used to display the icons. We will see examples and code samples in the upcoming sections.

NOTE: A Comprehensive List of all available Flutter Icons is given at the end of this article. Do not forget to check it out.

Icon Widget in Flutter

To make use of the Flutter Icons, introduce the Icon widget in your Flutter application. Its as simple as calling a method in Flutter.

Icon()

To start using the Icon Widget in Flutter, we will also have to know about different properties that this widget holds. Primarily, the following are the important ones.

Icon Widget – Properties

• color – The Color property lets you choose the Color of this icon. By default it takes the Black color. To make use of this property, use the Colors class. Accessing Colors in Flutter is simple by merely doing Colors.black, Colors.red etc.
• icon – The Icon attribute holds the Space for the Icon itself. In Flutter, the material design icons can be used as such,  but by calling the Class Icons. This class contains all the constants(Basically hexadecimal numbers) that point to individual icons in the material design library. The next section displays how to create this simple Icon using the available Icons.
• size – The attribute takes in a double value and lets you give any size for the icon. As simple as denoting a double value for eg. size: 22.0 will create an Icon of size 22 px.
• textDirection – The text direction is used to denote as to which direction the Icon should be rendered in. Make use of the TextDirection class for further available directions.

In the following section we will look at creating a simple example App using the Icon Widget.

Icon Widget – Example App

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const <Widget>[
    Icon(
      Icons.add,
      color: Colors.red,
      size: 24.0,
    ),
    Icon(
      Icons.access_alarm,
      color: Colors.green,
      size: 30.0,
    ),
    Icon(
      Icons.arrow_forward,
      color: Colors.blue,
      size: 36.0,
    ),
  ],
)

The above app creates a simple app that looks like below. In the following section, we will see all the available material design Icons along with their respective code/names. This way, the repository of Icons can be expanded for further use.

You can create the App with these list of icons only, if any other icon is required, you might have to look at using the ImageWidget in Flutter to load images/assets rather than Icons.

Flutter Icons – A Comprehensible list of all icons

This section will list all the available Icons and loads these Icons into the Flutters Icons widget. All you have to do is copy and paste the Icon code to get whatever you are looking for in Flutter.

Flutter Icon – Conclusion