what are icons in flutter

Flutter Icon Widget – A Quick Guide to Adding Icons in Flutter

Flutter frameworks has been the ultimate choice of developers to build scalable and interactive cross-platform apps. Your app needs to have a user-centered approach in terms of design and interactivity. Owing to this, Flutter icons play an important role in making your app’s design more interactive. 

A wholesome app development process comprises of unique ideas, multiple strategies and practices. When performed correctly, theses can result in development of a successful end-product. Similarly, your app needs to have a perfect UI design that should attract users and increase their retention through presenting different design elements.

In this blog, we will be covering everything you need to know about Flutter icon list and how to customize them.

Introduction to Flutter Icons

There are countless elements that we add to our apps while designing the app’s UI. These could be sliders, text fields, buttons, dropdown lists, checkboxes, tags,  search fields, toggles and what not. Flutter icons are one of the most important elements that we need to add into our app.

Flutter framework comes with icon widget that has plenty of icons. You can easily use any of the icon that is already available in the icon class. Interestingly, almost all the icons that you can require are already available in the Flutter icon widget. So you won’t need to worry about designing the icon yourself and then adding it to your app.

Let’s see how you can add any icon to your Flutter app using icon widget.

How to Add an Icon in Flutter?

You can add any icon in Flutter app using Icon widget. Then you need to identify the icon using the icons name . Here is how you do it.

To add a simple home icon, use the following code.

Icon(Icons.home),

Result:

how to add an icon in flutter

How to add multiple icons in Flutter?

To add multiple icons or a row of icons in Flutter, you need to identify in which alignment do you want to show the icons in. In this example, we will be showing icons in horizontally. So we create a row of icons like this:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: const [
    Icon(Icons.home),
    Icon(Icons.settings),
    Icon(Icons.account_circle),
  ],
)

Result:

how to add multiple flutter icons

As you can see, we have set the alignment using the property ‘MainAxisAlignment’ and specified the icons to be shown in a row. Moreover we added the spaceBetween property to keep spaces between them.

How to change icon Color and Size in Flutter?

To change icon color or size in Flutter, you need to add the color and size properties that come with the icon widget. 

Here is how you can change them.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: const [
    Icon(
      Icons.home,
      size: 60,
      color: Colors.teal,
    ),
    Icon(
      Icons.settings,
      size: 120,
      color: Colors.blueGrey,
    ),
    Icon(
      Icons.account_circle,
      color: Colors.orange,
      size: 30,
    ),
  ],
),

Result:

how to change icon color and size in flutter

Conclusion

In this blog, we have walked you through how to add icons in Flutter. Additionally, we have also guided you on how to change icon color and size in Flutter. We hope that you get to learn something out of this if you’re here till the end. 

Moreover, we will be bringing more updates and guides related to Flutter app development. Our next blog will on how to add custom icons in Flutter or how to use image as an icon in Flutter. 

Leave a comment below if you have to ask anything or make a suggestion. We would love to hear from you.

Leave a Comment

Your email address will not be published. Required fields are marked *

Share Post On

Haroon Ashraf

Flutter Developer

Detail-oriented full-stack engineer with 9+ years of industry experience. He’s been working on Flutter since 2018 and has delivered 30+ successful projects.He has experience in project management Trello, Github, Jira…..

Flutter
Xcode
IOS-Swift
Full Stack
Bloc/Cubit
Nodejs

Experience

Availability

9 years

Full-Time

Translate »