👨🏼💻Flutter | Develop Custom Widget
Helloo👋 So far, I have written several articles on Native Android, HarmonyOS and Huawei Mobile Services. Now I want to write an article about Flutter. Happy reading 🙂
Introduction
When it comes to Flutter, the first thing that comes to mind for most people is flexible development on the UI side. This being the case, the number of people trying to create personalized and eye-pleasing designs is quite high. I wanted to choose a structure and develop a custom widget for myself. And I chose the structure that means “Badge”.
What is Badge? A sign placed in any position around any icon. This sign is added to inform/warn us about the purpose of that icon.
Implementation
I will try to explain step by step everything you need to do to create your own custom widgets. Here are the steps we will take:
1- Design Your Widget:
Since I chose the “Badge” structure, I determined how I would design this structure according to myself, what I would like to see, and these. You can do this part on paper or on a computer using design programs.
2- Decompose Your Design:
You need to decompose the structures in your design. What does this mean, for example I need to use an icon in the “Badge” structure, with it a round sign and a text inside the sign. I continue to determine and develop which widgets I should use for these: Stack, IconButton, Visibility, Positioned, Container, Text.
3- Basicly Create Your Widget:
After right-clicking on the “lib” folder in the project, create your widget file by clicking “New” > “File”. Then you need to write the necessary codes to create your widget. I wrote the following codes for the “Badge” Widget.
In the Constructor section, I requested some parameters from the user as mandatory, while I added others optionally. Afterwards, I developed the design part of the “build” method and created a widget.
4- Customizing the Design:
Actually, I mentioned this part above. I added every parameter that I added optionally to the Constructor section, for the purpose of customizing / personalizing the Widget that I developed. In this way, there can be a lot of variety in both personal use and the possibility of other developers using this Widget.
5- Determining User Interaction:
In the section on how to use the Widget you have developed, you should also consider the interaction with the user.
Click interaction of “IconButton” Widget for Badge Widget,
IconButton(iconSize: iconSize, onPressed: onSelectPressed, icon: badgeIcon)and I wanted to improve the interaction of changing the text on the widget according to the value given by the user, by using the “Text” Widget.
Text(counts.toString())6- Definition and Implementation of Parameters:
While developing the widget, you can examine the use of the mandatory and optional parameters you want from the user in the application together with the widget from the code block below. I wanted to create 3 different designs by giving different parameters to the same Widget.
7- Testing the Widget:
In order to see the Widget you have developed in the application, of course, it is necessary to test it after writing the necessary codes. In fact, this part may be the more enjoyable part of the job :)
Conclusion
While developing your application in Flutter, you can develop custom widgets and use them in different places with different designs. But be careful, if you try to develop a custom widget for every situation, it may do more harm than good.
I hope it was a useful article. See you soon 🤗
