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 like a flutter conditional show widget, flutter inkwell widget, flutter focusnode widget flutter inherited widget 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:
If you want to remove the Icon button padding in Flutter click here
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:
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:
Conclusion
In this blog, we have walked you through how to add icons in Flutter. Additionally, we have also guided you on how to adjust flutter font size based on screen size. 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 be on how to add custom icons in Flutter or how to use images as an icon in Flutter.
Leave a comment below if you have to ask anything or make a suggestion. If You need flutter app development services you can hire flutter developers from Flutterdesk.
