Javatpoint Logo
Javatpoint Logo

Flutter Icons

An icon is a graphic image representing an application or any specific entity containing meaning for the user. It can be selectable and non-selectable. For example, the company's logo is non-selectable. Sometimes it also contains a hyperlink to go to another page. It also acts as a sign in place of a detailed explanation of the actual entity.

Flutter provides an Icon Widget to create icons in our applications. We can create icons in Flutter, either using inbuilt icons or with the custom icons. Flutter provides the list of all icons in the Icons class. In this article, we are going to learn how to use Flutter icons in the application.

Icon Widget Properties

Flutter icons widget has different properties for customizing the icons. These properties are explained below:

Property Descriptions
icon It is used to specify the icon name to display in the application. Generally, Flutter uses material design icons that are symbols for common actions and items.
color It is used to specify the color of the icon.
size It is used to specify the size of the icon in pixels. Usually, icons have equal height and width.
textDirection It is used to specify to which direction the icon will be rendered.

Let us understand Flutter icons using different examples.

Example 1:

In this example, we will see the basic icon widget that has default values. First, create a project in the IDE, navigate to the lib folder, and then open the main.dart file. Now, replace the below code in the main.dart file:

Output:

When we run this project, it will show the UI similar to the following screenshot in the emulator or device we are using:

Flutter Icons

Example 2:

In this example, we will see how to customize the icons. Here, we will use the size attribute to adjust the icon size according to our needs. We will also see the color property to change the icon default color. So, open the main.dart file and replace it with the below code:

Output:

When we run this project, it will show the UI similar to the following screenshot in the emulator or device we are using:

Flutter Icons

Example 3:

Most of the time, we have seen that the icons always contains a text below it in our application. In this example, we will see how to use the Text widget with the Icons widget. So, open the main.dart file and replace it with the below code:

Output:

When we run this project, it will show the UI similar to the following screenshot in the emulator or device we are using:

Flutter Icons
Next TopicFlutter Image




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA