Layered Architecture to Advanced Flutter Apps
Your project always being chased for the dark side. The dark side can show because of many problems(new features, package changes, etc.). We will learn how to be strong with this problem or new features.
We talk about how to grow application design for your business application. Our main goal to control code in our hand.
You be careful by starting the project so your application has to be a ready structure for the development team. Let’s think about, what we do and how to make architecture.
Layer Design
It must important for your project. It should have many business rules so anybody should be easy to define a business class. Actually, we can know what to need any project (if write the first project, don’t more important about the project needs).
In my opinion, many projects are created three key points:
- Application Folder Design (structure)
- Env Management (publish, env, config)
- Feature Development (packages, business, core development)
Of course, these points should be increments for other situations, but you will see what I think after this article.
Folder Design
Maybe, this subject could see easy for everyone but sometimes has a problem in projects. This reason could be development experience, architecture look etc.
Core
This layer has complex code but without any of your project code. We main target, this layer always could be using the different project. If your core layer has any business code, your usage may be going too hard.
Project(more usage Product)
This layer has been created for special needs by the project. For example your theme layer, localization, structure(network instance, like error) etc. This layer key of point what use project needs.
Delivery
Maybe everything should be done but more time forgot delivery architecture for developers important until the development process. We could define local pipeline then doesn’t spend own time. Finally, just call like this script after the package publishes the store with notifying the current.
Structure Design
Many application needs to how to use to coding any page. Structure design tells about page design, project design or any special manager design. So need to think about which use state management strategy in the application. Look at what we have.
- MVVM, MVC, VIPER, etc.: These patterns give you a project design strategy.
- BLoC, MobX, Redux etc: Project has worked more powerful with these management methods
- Singleton, Strategy, State etc: Project could be testable code with these and have well article code.
This article use mobx and MVVM design pattern. If you want to change a solution like MVVM or mobx, you can just change the article class. It works everything with your new architecture.
Delivery Design
Project delivery methods important because your application how much easy to publish in any store, you don't think this process and development time increased in my opinion. Delivery has done in two ways.
- Continuous Integration: This way needs to measuring quality and find the possible errors (unit test coverage, package build, codebase etc.).
- Continuous Delivery: It more complex C. I layer. This way does it together integration process and deploys servers, deployment environment etc.
I don't know about the DevOps operation, to tell the truth. I love read DevOps world so I think always this solution how to use easily my app.
Coding Time
Let’s check what we use in this project and see what we need.
- Application Structure: MVVM
- State Managements: MobX with Provider
- Folder Design: Feature Base
It’s so cool, it tells me to have a great structure on this project and your code know where put here.
- Let’s remember, we talk about the core layer has not business code (like service point, or custom widget)
- I was more using the base folder to create a common class. For example base view class to use mobx page:
It should be seen, doesn’t any business code or special code. If you wanna use this, it ready to use for every project. It is the main idea for the core layer.
- We think again, every project needs to custom exception class to notify the screen on error time. It should be in the init folder with exceptions name.
It show be again, doesn't have any custom code and reusable for every project.
- Atomic design more important for fluter projects so this structure provides an atomic design start point that can use your app.
The first widget has to in the core layer but the molecule widget create in the product folder because it widget have business code(like top to left)
- It has an extension without product code, you should write in core/extension. For example, you have a string extension for validation like this:
- We think about the init layer. This layer created for only first time initialize manager. For example cache manager, this manager doesn't need business code then I wrote manager in the init layer and I had the power to cache coding.
It shows the core features with shared preferences and you use this everywhere.
Maybe, you write preferences enum in the product folder and add new keys.
Now the time application features layer. We’ll use MVVM and mobx. MVVM use for application pattern and mobx use for manage to page lifecycle. (update notifies etc.)
MobX Design
MobX work for your business operation. Update any widget when just change to a new value. Let’s add these packages in pubspec yaml. You have to work always build a runner. Build runner package automatically generate mobx code when the package has to serve mode.
flutter_mobx: ^2.0.0mobx: ^2.0.1mobx_codegen: ^2.0.1+2build_runner: ^1.12.2
Now, I am creating a mobx view model like the home view model and we’ll show generator code. In another case, build runner has worked for your generation process. (home_view_model.g.dart)
This extension is more useful to mobx flutter operations.
We create a sample mobx view model like this. If you want any object notifying to screen, you should add an observable annotation. You need to notify any function to observable variables, just write an action annotation with function and everything has done.
You can watch the full example about mobx in this video.
Home View Model does like this. You can add any object or list what you want for the screen.
MVVM Patterns
We have a view model after to create view and model class. Model layer for page object(ex: List<Product>). View layer relation with view model and listen to changes. View Model manages your all business operation.
I want to create a sample view to use this view model. Let’s look at an example:
Observer widget has come by mobx package and this widget listen to ViewModel observer variables. This widget automatically updates to variables, don't need any code for an update.
Item model needs to more for service response. May we have JSON place holder service and it consumes from the application, you create an item model like this.
I used JSON to dart the website for sample projects but if your project has complex json, you have to use JSON serializable package.
If you want to need a network request manager, my best opinion the dio package. I created vexana package with use dio to manage your network request. You can use vexana or dio.
Product Layer
Your best layer for the application. The product layer has main features so that we create a basket manager or custom theme manager etc. This main idea takes a whole solution for the product only one folder.
Let’s think: You have a user manager, and maybe authentication operation or have a bullet for any money. You need to access different class or work with manager methods. It has to be in the product folder and you add-relation update in this layer.
Like this manager, it is told to my exploration in the upside. If you wanna use this layer everywhere, it puts in the provider layer then you can just call in context.
It ready to use everywhere like this:
//Single operation
context.read<UserManager>().defaultMoney//Listen operation
context.wath<UserManager>().defaultMoney
Provider layer looks has theme manager. What could it be? Yes, we need to change the application theme on runtime after we should create this theme object.
Yaay it's seeming too good. Well, what could the product/widgets layer? Let’s look for an example.
We want to use the checkout button with her money. Our business if the user has 50$ money, the button is visible otherwise button has disabled mode. This business clearly shows a need for a more productive business so that we should didn't write the core layer.
Bonus** Localization
Other important point localization. I use a more easy localization package because my business text makes unique sometimes. I complete the basic setup of this package after going to work on this script for code generation.
flutter pub run easy_localization:generate -O lib/core/init/lang -f keys -o locale_keys.g.dart --source-dir assets/langsOkay, we ready to use coding architecture for version one. This architecture needs to publish the process. Let’s talk about these features:
Publish
While starting the subject, most important didn’t choose manual operations to any operations. Now, the developers' community has more solutions for CI, CD operations.
I was using Fastlane many years ago after I loved this solution. Fastlane gave you write custom pipeline. Let’s look at the first start. I’m going ios folder or android, and just call Fastlane to init command in the command prompt.
Firstly asking how do you do with Fastlane? Fastlane says: I have a ready to use a line like automate test flight etc. If you want to use it, I can prepare it directly.
I prefer the test auth. options after it will be created test flight line on your project. Fastlane has a create project options in-app store or play store when starting the first project.
You complete the all process after can write a custom line. For example, it is uploaded a test flight line in mine production projects.
You want to more code, look for ruby language after will write any logic in your line. It solution has many custom package on the Fastlane docs site after you look firstly this here.
Fastlane has support swift options instead of ruby but i think these options in the beta version. You can follow the features fastlane website or github.
Apple and Google platform like each other. You can change only the publishing platform or specific options.
I was uploading ios and android Fastlane usage sample with the Turkish language. If you want to watch, I leave the link to the here video. ( you can find code detail architecture GitHub repo before you can look at my template content)
We ready to architecture things. That’s only one thing, if you add our thins this layer, that's a better solution for you.
Thanks for reading 🍀
Be healthy
