1 of 42

Mastering Modular in Flutter Application

2 of 42

R Rifa Fauzi Komara

Currently

Mobile Programmer Specialist, Sinarmas MSIG Life

Part Time (Remote) Flutter Developer, Hireplace, Singapore

External Reviewer Flutter, Dicoding Indonesia

Previously

Community Lead, Google DSC Indonesia

Freelance Flutter Developer, Dcolearning

Flutter Developer, Cari Aja Indonesia

Android Developer, Eudeka and GITS Indonesia

@rifafauzi6

3 of 42

Outline

  • What is Modularization
  • Why we should care about Modular approach?
  • Modularization in Several Ways
  • What Modularize can we use?
  • Conclusion

4 of 42

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.

5 of 42

Why we should care about Modular approach?

6 of 42

Common Project VS Multiple Module

lib

App

Module B

lib

Module A

App

Module C

Left side

Right side

Confidential + Proprietary

7 of 42

Sample

Confidential + Proprietary

8 of 42

Confidential + Proprietary

9 of 42

Modularization in Several Ways

  • Basic
  • Pattern / Architecture / State Management
  • Unpublish
  • Publish

10 of 42

Basic

11 of 42

Basic

Common

UI

Network

Custom Shared

Data Handler, Logic, etc

Visible to User

Helpers, Utils, Cons, etc

API, Model, Database, etc

Activity/View/Screen

Widget

Custom Widget

Custom Widget

Confidential + Proprietary

12 of 42

Sample

Confidential + Proprietary

13 of 42

Pattern / Architecture / State Management

14 of 42

State Management (BLoC)

Repository

Network

BLoC

UI

Visible to User

Logic

Data Handler

Data Provider

Page, Widget, Common, etc

​

BLoC / View Model / Presenter

Repo, SharedPreferences, etc

API, Model, Utils, etc

Confidential + Proprietary

15 of 42

Sample

Confidential + Proprietary

16 of 42

Unpublish

17 of 42

Unpublish

  • Local
  • Internet

18 of 42

Local

App

Module Repository

Module BLoC

lib

Module Network

All module inside the project

Can connect with each module

Confidential + Proprietary

19 of 42

Sample

Confidential + Proprietary

20 of 42

How to create Module?

1. Android Studio

2. Terminal

$ flutter create --template=package name_of_module

Confidential + Proprietary

21 of 42

Add the Module into our Project

Project structure

Your module

Confidential + Proprietary

22 of 42

And How if our module is outside the project?

​

You can use path property and call (dots) .. first. Ex:

Your project

Your module

Confidential + Proprietary

23 of 42

Internet

App

lib

All module (bloc, repository, network) save on git except lib

Module Repository

Module BLoC

Module Network

Confidential + Proprietary

24 of 42

Sample

In Your Machine

In Your Git

Confidential + Proprietary

25 of 42

Add the Module from Git into our Project

Confidential + Proprietary

26 of 42

But, wait...

How if the git have a branch name and want to add specific branch?

​

27 of 42

Relax...

Confidential + Proprietary

28 of 42

But, wait...

If we use this approach, we will get the problem to update and reuse our module. What it’s?

29 of 42

Problem

If we add, delete, or change/update the function from module in the Git. The UI / your project can’t take the update function from the module because you must to publish the module update to git first (git push), so after that you can take the updated function from your module.

30 of 42

Form Local (your project)

Form Git (your module)

Confidential + Proprietary

31 of 42

Publish

32 of 42

Publish

For this way, the module that will be created is like library who add in the dependencies (Android Native) and host it into maven and Plugin or Package who add in the pubspec.yaml (Flutter) and host it into pub.dev

33 of 42

What Modularize can we use?

  • Layer
  • Feature
  • Combine

34 of 42

Image slides

Layer

Separate the module by layer

App

BLoC

Ne�two�r�k

Repos�i�t�o�r�y

l�i�b��/��UI

35 of 42

Image slides

Feature

Separate the module by feature

App

Log�i�n

Use�r

Home

36 of 42

Image slides

Combine

Separate the module by layer and add the feature as module

App

Repos�i�t�o�r�y

Fea�t�u�r�e��A

Fea�t�u�r�e��B

Ne�two�r�k

BLoC

37 of 42

Conclusion

Confidential + Proprietary

38 of 42

Without Implement Modular

  1. Easy to learn
  2. Fast development
  • Hard to maintenance
  • No separation of concern
  • Hard to test
  • Not readable

Pros:

Cons:

Confidential + Proprietary

39 of 42

With Implement Modular

  • Separation of concern
  • Maintainable
  • Testable
  • Add or remove or change feature/module easily
  • Less unused code
  • Reusable feature/module
  • Same behavior, same standard across different app
  • Slower development
  • Can be overkill for a simple feature

Pros:

Cons:

Confidential + Proprietary

40 of 42

What is your choice?

Confidential + Proprietary

41 of 42

References

Confidential + Proprietary

42 of 42

42

@rifafauzi6

rrifafauzikomara

rrifafauzikomara

Thank You!