How Modularization in Flutter Helped Us Deliver Apps Faster

How Modularization in Flutter Helped Us Deliver Apps Faster

·

3 min read

One fine day, our team gathered in the boardroom where the project lead briefed us on a new feature/sub-product we were introducing to our product, which we will call Feature X.

Feature X is quite extensive and big in itself, involving numerous existing components from our current product. Despite being a subpart of our product, it will eventually become its own separate application. However, in the meantime, it needs to reside within our main application.

The initial approach posed a significant challenge:

  • Writing all the code for Feature X in our main application, ten later copying and refactoring it into a new Flutter app.

  • This would create a maintenance nightmare, requiring us to duplicate efforts for bug fixes and feature additions in both codebases.

Recognizing this, I realized that this traditional approach would be a mess and there has to be a better solution.

So, I turned to Google for solutions and discovered modularization. By harnessing the power of modularization, we could simplify our workflow and avoid many potential issues. However, there were a few steps we needed to take before diving in.

  1. Create a Common Module: This module would house all our shared resources like color files, styles, themes, etc.

  2. Create a Module for Feature X: Isolating Feature X into its own module.

  3. Create an Authentication Module: Covering all authentication-related functionality such as sign-in, sign-up, password reset, etc.

What is Modularization?

Modularization, or modular programming, is a software design technique that involves separating functionality into independent, interchangeable modules. Each module contains everything necessary to execute a specific functionality.

In simple terms, these modules can act like plugins—just add them and you are good to go.

This image illustrates how a modular project looks. The main body is the core project, and you can attach different limbs (modules) as needed.

For example, on the left, the work can be split between two developers or more. On the right, the work can be split among five developers or more. This is very suitable for a large team because the project is divided into modules, allowing developers to focus on their specific module.

Modularization in Several Ways

  • Unpublished (Local/ Internet)

  • Publish

Publish

Published modules are public packages. You add the package when you need it and then remove it when you don't.

Unpublished

In our case, we used the unpublished approach. Here, you create a Flutter module, but instead of uploading it to a version control host like GitHub, the module resides within the project itself.

While in development this helps to change the package code anytime and it will reflect in the running app, using hot reload.

While in development, we opted to host these modules locally, as it was the most efficient choice. We plan to move them to a private repository once the development phase is complete.

Using modularizing, we made our development process more manageable and scalable, setting the stage for easier maintenance and future expansion.

Did you find this article valuable?

Support Geek Aid by becoming a sponsor. Any amount is appreciated!