Flutter: Reusable Widgets
Most of the time, we are duplicating so many widgets just for a little change. What could be the best possible way to get rid of these things? It’s creating Reusable Widgets. It’s always good practice to use Reusable Widgets to maintain consistency throughout the app.
When we are dealing with multiple projects, we don’t like to write to each code multiple times. It will create duplication and in the end, if any issue comes we end up with a mess😣.
So, the best way is to create a base widget and use it everywhere. You can modify it based on your requirement and another advantage is if any change comes then you need to do it in one place and it’ll be reflected everywhere.
UI with less business logic:
Try to code less business logic inside a UI widget. All the communication between the user and UI should be done via events. So, if there is a need to use the same widget in another project, you can do it quickly.
Use events to pass data:
Access data via callbacks is the best possible way to separate your View part from business logic(Just like View and ViewModel).
In this blog, we are going to see reusable TextFormField, RaisedButton, SnackBar, and Toast.
Reusable TextFormField
TextFormField is the basic widget we use in our app. To create this, we need to create one StatefulWidget which requires some fields to be displayed on the UI.
What I have done here is taking all the data from the user(which can be dynamic) and passing it to the widget. Here, we have managed all the cases for TextFormField like input type, keyboard action, default text, hint, error, focus, text validation, field tap, submit click, etc. So, here we have successfully achieved separating our View with business logic.
Note: Few values(padding, font size, font family, etc.) are static. You can change it as per your need.
You can use it in your every layout like this:
Note: You can modify the parameters as per your requirement.
Reusable RaisedButton Widget
Another most important widget is RaisedButton. Generally, we need a button that accepts arguments with or without an icon. We just need to pass the Icon to display the leading or trailing Icon.
We have used ButtonTheme here to customize our button height and width.
You can use in your layout like this:
Reusable Toast Widget
To display a message for a while inside a screen. You can create this function in utils class and use it everywhere. You just need to pass the message.
Use it in your layout like this:
Reusable Snackbar Widget
To display a message for a while at the bottom of a screen. Snackbar can be with or without action. So, we have set optional parameters(actionMessage and callback of a button click) for Snackbar.
Note: You need to pass proper Scaffold Context while using Snackbar else it won’t get displayed.
Use it in your layout like this:
Conclusion
As you can see above, separating View and Business logic can save so much time. You just need to pass the data and you can reuse these functions everywhere. So, it’s the end of the duplicating the code. We can also make other widgets like Dialogs, switch, etc reusable. It depends on our needs and the requirement.
You can find the sample project on git repository:
