In an age where attention spans are shorter than ever, keeping your Flutter widgets concise and manageable is key to ensuring your code doesn’t get lost in the noise. To achieve this, we would need separation of concerns into different dedicated files. Doing this does not only reduce the size of code in a single file and improve its manageability but also enables reusability of the same piece of dedicated functionality across the application. Isn't that just awesome? No more worrying about inconsistency in replicable logic and importantly no more worrying of where you lost it all(attention) along the the massive single file.
Excited to see this in action? Let's get into it. So each page(Activity) you see in a Mobile application has a number of well thought out pieces that define it. This pages can be either a Login, Registration, Profile or any other page needed for the application to perform a certain action as desired by the system. When you move from one page to another you realize that each of them may be structured differently and each of this has a different style that is achieved by placing of different items on a page from the other pages or the color used to define each of the items or pages is different from the other items or pages. In an application developed using Flutter, everything you see on the screen —buttons, text, images, containers, even padding—are all widgets and widgets are simply the basic building blocks of the User Interface(UI). Easy right?
So if everything on a page is a widget we are easily tempted to define everything on a single page. i.e the Logic, Structure and the Styling. With this kind of approach chances are that a single page file or rather activity(in Mobile language) ends up with so much code and it is easy to lose track of the start or ending of a certain widgets code. Talk of the little brain freeze after realizing you lost track 12 lines above!
Well worry no more, unc is here to see you through on how to keep it short and interesting while achieving the best and hacking your productivity. So below we have example of a piece of code where the structure and the styling is done in the same file...
in above image, a TextFormField which on the screen is a search bar has a property 'decoration' that is used to style how this widget appears on the screen of a users device. Am guessing you might have missed even where the 'decoration' is right? Well this is because there is just soo much going on in the same widget and some things might slip the eye. Now assuming this is the page where we have the structure defined, say customers.page.dart, then we can have a different file, say customers.styling.dart where we could now move the widget InputDecoration which is used to style the TextFormField widget via the 'decoration' property and this would significantly reduce the file size of the customers.page.dart structure as shown below...
By doing this the TextFormField widget becomes shorter and much easier to read and understand. What we did was simply move the code to a different file and place it inside a function customInputDecoration which returns an InputDecoration and apply it to the TextFormField property 'decoration' that defines the look on the users device. Below is the entire styling for the search bar...
Easy, right? Best part is the same styling can be used across all search widgets in the application. Talk of code reuse. One of the rules in the Clean Code is that functions should be small and to get it right it says “The first rule of functions is that they should be small. The second rule of functions is that they should be smaller than that”. My guess is that it was sweet too since you finally managed to see the decoration property.
See you in the next, Happy coding!!
Share this Post!
