Flutter | Clean Application Architecture
We recently published an application template as the Zalisoft Mobile Team. It got a lot of attention. Now, I would like to explain this template in the hope that it will reach more people and guide people. So let’s start!
It is very important to keep files and folders organized in a Flutter project. Below you can see the folders belonging to the architecture.
There are two main folders under our lib folder. core and view. The core file also branches within itself. These are: base, components, constants, extensions, init and mixins.
Now let’s examine these folders in turn.
· base: The folder branches into itself. This is the main folder of the application. Here we define structures that will run when the application is opened and that can affect every part of the application.
bloc first. Our login, register, forgot password etc. We need a BLoC structure for transactions. And since it is the part that will run when the application is first opened, we have defined it here. Then functions folder. Base Functions contain helper methods that can be used anywhere in the application. For example;
Then we have the models folder. Here we define our model files that can be used everywhere in the application. However, there is something I want you to pay attention to. You should not define the model file for a product page here. The models in the base folder are only for models that will be used throughout the application. And the same goes for the services file. Remember, core is our main layer and the base folder also serves this main layer.
· components: Now let’s examine the components folder. Actually, the logic is simple. Here we define some special widgets that we will use in many parts of the application. For example, the button, appbar, scaffold structure in applications is mostly the same. We can already customize the different pages according to the project requirements.
· constants: Here, we will use application constants and enums. Let’s see.
I like keeping the colors in the AppConstants folder and the singleton approach. Also, I keep helper values in enums. For example, I specify values that I will use for redirection later in enums.
· extensions: I also keep the extensions under the core folder. Because as I said before, I will use them everywhere in the application.
· init: Here, local storage, routing structure, theme, some utilities, dependency injector etc. exists. You can access and review this project from the GitHub link at the end of the article.
· mixins: We add some packages to our project. We can create a mixin instead of using these packages directly. It is healthier to access the package from this mixin, because there may be a change in the package or it may be obsolete. Let’s see what I mean.
I defined a method belonging to the url_launcher library here. I will be able to access this method by using the ‘with’ keyword on the page I will use later.
The contents of the core folder were more or less like this. Now I would like to introduce you the view folder.
· view: This folder contains all our pages. home, login, product, profile etc.
I would like to mention the home folder here. Under the home folder, there are bloc, model, service, widgets folders. Similar to these folders were also in the core folder above. So what’s the difference? It’s pretty simple. I will use the definitions here on this page.
That’s all for now :)
Thank you for reading. I hope it will be useful for you. You can access the project source code and my linkedin account from the links below.
Source code: https://github.com/Zalisoft-Mobile/flutter-mobile-app-template
