DEV Community

Edo Lubis for Tentang Anak Tech Team

Posted on

Modularization in Flutter App

As the complexity of a project increases, so does the amount of code we write. Therefore, maintaining code quality, scalability, and readability becomes even more important. One approach often used by engineers to address these challenges is modularization.

What is modularization? Simply put, modularization is the process of breaking down a problem into smaller, more specific tasks or components, so that each part has a clear and focused purpose.
Modularization example

However keep in mind, modularization doesn’t necessarily reduce the complexity of your project. The overall complexity may remain the same, but modularization makes it easier to manage and maintain.

We can separate modules based on features, by layers (such as UI, model, etc.), or a combination of both, depending on our needs and preferences.

Module based on

When modularizing, it's important to remember that good modularization is characterized by high cohesion, low coupling and bounded context.

High cohesion means that each module has a specific function and focuses on a single purpose. For example, a module responsible for user authentication should only handle tasks like verifying user credentials or managing login sessions. It should not include unrelated functions, such as processing payments or managing user preferences.

Low coupling means that modules do not rely excessively on other modules, so changes in one module do not have a significant impact on other modules. For example, the user authentication module should be designed in such a way that it operates independently of other modules.

Bounded context means that each module should operate within its own domain, with its own set of rules and responsibilities. It ensures that the boundaries of a module are clearly defined, preventing its domain from spilling over into others. as an analogy, imagine you are designing an amusement park with various rides. Each ride in the park has its own theme and different rules, such as the roller coaster, haunted house, or giant Ferris wheel. Each ride has clear boundaries, with features and rules that apply only within that ride.

In the roller coaster, the main rule is speed and passenger safety. All design and interactions in the roller coaster are focused on providing a thrilling and safe high-speed experience.

In the haunted house, the main rule is to create suspense and surprise. All design elements and interactions in the haunted house focus on creating a spooky and mysterious atmosphere.

In the giant Ferris wheel, the main rule is to enjoy the view. This ride is designed to offer a calm and scenic experience, without speed or tension.

Even though all these rides are part of the same amusement park, each operates within its own bounded context, with its own rules, definition and goals.

a1

learn more about cohession and coupling

Lets take the example of an ecommerce application where a user can Login, Browse a list of products, Add products to the cart, Make a payment and chose the shipping method.

This application can be modularized as follows:

  • User Module: Handles user authentication (login, signup, password reset).
  • Product Module: Handles product list, product details, and product filtering/searching.
  • Cart Module: Manages the shopping cart, including adding/removing items, displaying total price, and updating quantities.
  • Payment Module: Processes payments and manages transactions.
  • Shipping Module: Manages shipping options and delivery methods.

And make sure, each module has boundaries defined based on the principle of bounded context, which means that each domain should have its own rules and responsibilities, ensuring that it operates independently within its own scope. This approach guarantees that each module has high cohesion (meaning all related functionalities are grouped together) and low coupling (meaning minimal dependencies on other modules).

Modular Approach in flutter using flutter package

In Flutter, we can adopt a modular approach using Flutter packages. For example, if we create a new application named "TradingApp," we can organize the modules based on features such as Wallet, Login, and Market.

  • Create a new Flutter project.
  • After creating the TradingApp project, create the login module by going to File → New → New Flutter Project, and select Package.

a2

a3

  • Then, create the other modules. The project structure will look like this

a4

  • To enable TradingApp to use the other modules, we need to link them with import dependencies, similar to Flutter libraries.

a5

  • This way, we can use different modules within our application.

a6

  • We can also group modules into a single folder in our project. This will make the project structure and pubspec.yaml file look like this:

a7

  • Or If we prefer not to keep the modules in the same repository, we can use a different approach by placing each module in separate Git repositories.

a8

Conclussion

Modularization enhances software development by breaking complex projects into manageable, focused components, which improves code quality, scalability, and maintainability. This approach allows for better organization, easier updates, and reusability of code, and facilitates collaboration among team members. And, for modularization to be effective, it is crucial to ensure high cohesion within modules and maintain low coupling between them.

Top comments (0)