Flutter: Defining a Structure for GetX -Part 1(Creating a New Page)

Flutter has been one of my most favorite frameworks that I worked on over the years. So, when I learned about Getx state management I was truly in love. It gave me soo much control over states and provided me with a ton of utilities right out of the box.

One of the first challenged I faced while getting into Getx was defining a sound structure that is scalable as industry-level projects can go from 0 to 1000 in a matter of weeks and having sound control over your code is very important. So after experimenting and deploying multiple applications using Getx Flutter here’s my insight.

Let's start with a brief on GetX —

• GetX is a state management micro-framework, it not only enables us to build applications for android, iOS, web, Linux, macOS and Linux, with GetX you can build server applications with the same syntax as Flutter.
• GetX is efficient and performance-oriented and has developed its own GetStream and GetValue to improve response time and reduce RAM consumption.
• Less Boilerplate code its very clean and clear in its approach.
• In GetX everything is reactive, and nothing depends on code generators, increasing your productivity in all aspects of your development.
• It's very well maintained and updates are frequent the community is very active around GetX and enjoys growing around it.

Ok! So we had a brief intro now let's see what we came here for —

• When using GetX you need to create multiple classes for your stateless/stateful widgets, your bindings, controller, etc.

My structure for a single page looks like this -
Directory — Page1 -

— — — — — \controller.dart

— — — — — \page_view.dart

— — — — —\ binding.dart

• This is one of the simplest ways to define a page for a small-level project.
• On a page, you have to first define a directory with the name of the screen.
• Then define the controller where all your logical code functional code will be written along with the declaration of controller and variables.
• Next will be your design file where all your code that will be rendered will be written.
• Last will be the bindings will you can bind your controllers.

It's simply elegant and fast but for bigger projects, I would recommend segregating your applicative and design files into two different directories as -

Complex Directory — Page1

— — — — \ui

— — — — — \login_page.dart

— — — — — \forgot_password_page.dart

— — — — \application

— — — — — \controller.dart

— — — — — \ binding.dart

• As if pages are connected we can inject one controller into multiple views to maintain the logic if they are interdependent.

End of Line -

Phew that was a lot to take in but we made it and hopefully, it helped you a little in your journey to understand a page structure for small and large-scale projects using GetX. In the following post, we will learn about API Calls directory setups, models directory setup, and much more ….

Stay Tuned and thanks for Engaging