Flutter: Mastering Modularization — In Several Ways
Hello everyone, this is my first article on Medium. My name is Rifa, currently working as Software Engineer, Mobile (Flutter). In this article, I will share about how to manage the Flutter project to make it scalable with a modularization approach.
Before I explain further, here is the outline.
- What is Modularization
- Why we should care about Modular approach?
- Modularization in Several Ways
- What Modularize can we use?
- Conclusion
What is Modularization
Modular programming is a software design technique to separate functionality into independent, interchangeable module, so that each contains everything necessary to execute a specific functionality.
Before I explain the modular concept more deeply, does anyone understand the meaning of the picture above? If yes, you can compare your understanding of what I will write. If no, you can read carefully this article and make sure you are in focus condition!.
So, the meaning of the picture above is I am a student majoring in informatics on campus, then I go to the library to reading some books, after arriving there, of course, I will find the book that I need right? Usually, books in the library will be separated based on the department or course (if the campus library) in each bookcase and certainly neatly. Because the book is separated, it will make it easy for me to find the book I need. But what if it’s not separated? You can imagine all kinds of books from all majors, courses combined in the same cabinet and randomly. How do you feel about that? Surely it will be difficult to find the book you want right? Maybe you can find the book you want, but it will definitely take a very long time.
Let’s assume that the book we are discussing is the code we are going to write, then we assume the bookcase is the Flutter project. Surely, it will make it difficult for you to manage your Flutter project in the future because all the code is not separated. Why is that? You can see one of the examples below.
As you can see above, the project combines classes that contain UI, widgets, logic and even data in the same file. And of course, that makes too many lines of code, even though the project only shows one screen. Can you imagine what if you make a very complex application but follow the standards like the picture above? Therefore you need to implement modularization!.
Why we should care about Modular approach?
For example, on the left, we can only split the work for two developers or more. But on the right side, we can split the work for five developers or more, and also this is very suitable for a large team because we split the project as a module. So the developer can focus on their module.
Modularization in Several Ways
In this article, I will explain the concept of modularization in several ways.
1. Basic
2. Unpublish (Local / Internet)
3. Publish
Basic
To make your project implement modularization very easy and simple, you can follow an approach like the picture above. And the image below is an example of the structure of the project.
And also, you can check this example of this project who implements modularization using a Basic style here.
How is this? Very simple isn’t it? Let’s move on to the next stage.
Unpublish
In this way, I will divide it into two parts, Locally and on the Internet.
Locally
In this step, we create 3 modules (BLoC, Network, and Repository) inside the project. And this is below is an example structure project looks like.
As you can see, the flutter_modularization project has more than one module. Thus, we can separate several components into separate functionality as an independent, interchangeable module, so that each contains everything necessary to execute a specific functionality.
The question is, How to create a module?
Okay, to create a module there are several ways, from Android Studio or Terminal.
From Android Studio.
From Terminal.
flutter create --template=package name_of_moduleAnd, after you create some modules. Then, you want to connect them to your root project. You just add it to pubspec.yaml in the root of your project using path. It looks like below.
How if our module is outside the project?
The answer is: You can use the path property and call .. first like below.
And also, you can check this example of this project who implements modularization using Unpublish (Locally) style here.
What do you think? It’s very Amazing, right?
Internet
In this step, our modules (BLoC, Repository, and Network) that already created previously in the project, we save it to Github. And this is below is an example structure project looks like.
And how to add those modules to our project?
The answer is: You can just use the git and url property module like below.
And how if the Github have many branches and want to use modules on specific branches?
The answer is: You can just use the git, urland refproperty module like below.
But if we use this approach, we will get the problem to update and reuse our module. What it’s?
If we added, deleted, or changed the function from module in the Git / Internet. The UI can’t take the update function from the module because you must publish the module update to git first (git push) and in the your project, must first take these updates from git (git pull), so you can take the updated function from your module/project.
And the last way to implement modularization it’s Publish way. But in this way, I can’t write it in this article and will share it in another article. But take it easy, I will explain a little about this.
For (Publish) it’s like library who add in the dependencies (Android Native) and host it into maven / etc and Plugin or Package who add in the pubspec.yaml (Flutter) and host it into pub.dev.
What Modularize can we use?
1. Layer
2. Feature
3. Combine
Conclusion 💙
👏Congrats!! Now you have learned about modularization and implemented it in the Flutter project. And because we use this approach, this is what we will get.
Without Implementation Modular
With Implementation Modular
So, if you need a full source code on this article about modularization (Basic, BLoC, Local, and Network). You can check this Github and make sure to read the README file first!.
And if you need more complex resources in implementing modularization, you can check this Github.
If you have any questions, feels free to contact me via direct message on any social media or my LinkedIn. Thank you! 👋 and don’t forget to clap 👏 more on this post.
