Flutter & Monorepo — Power of Scalability

If you have clicked here, then there are two possibilities. Either you are aware of “Flutter” or “Monorepo”. Or you are looking for a combination of both. So, whatever the case is, let’s get started!

But wait a min, you might be aware of some stuff already so below is the agenda and you can hop on to any topic you want to 😃

Agenda

• What is Flutter?
• What is an architecture?
• Flutter and Monorepo
• Challenges
• Real world code-example
• Pros and Cons

Now you are aware of what we are going to talk about, so let’s get to work!

🦋 What is Flutter?

I’ll keep it simple, the rest you can google and find more at official docs.

So, flutter is simply a framework that helps you develop apps for mobile (Android, iOS), web and desktop (Windows, MacOS and Linux).

Man! That’s a lot of code!

No buddy, flutter is single code base for all the platforms you just need to manage the responsiveness 🔥

If flutter is a framework, then what’s the language used in it?

Well, its powered with Dart lang, which is quite similar to JS/Java/C++ group.

And that’s I guess pretty much it about what’s flutter and what it can do. Moving on!! 🏃

📦 What is an architecture?

In simpler words, architecture is the way how we maintain files in the project structure, how we write code in such a way that its reusable, scalable, readable and efficient. Keeping in mind that you are going to have multiple clients and servers involved in the system.

There are multiple ways of doing that, and that’s how names of architecture styles get published such as:

• 3-layer architecture
• N layer architecture
• Hybrid architecture
• MVC architecture
• Microservices
• Monoliths
• Monorepo

and the list goes on and on and on!! 🚗 🚗

It could be a long debate of good and bad architecture, let’s not dive into that and focus on what we are going to talk about.

So, Monorepo is one of the architectures. And of course, it can be used irrespective of what farmwork you are working with. Hence, we’ll be using Monorepo for Flutter in our case.

🧱 Flutter & Monorepo

It’s a way of managing multiple projects inside one project.

Another name of Monorepo people referred to as “Shared Codebase”.

A very basic project structure would look like this:

organization/
    - app_1
    - app_2
    - app_3
    - common_packages/
          - auth
          - api

Example: You could have let’s say a flutter app for Pizza shop and another app dealing with rider and another one for the customers.

With these apps surely you are going to have a lot of common functionality, or UI code or anything else. Which you can put into small dart packages and utilize across all the apps rather than writing that chunk of code for each app separately.

🥷🏼 Challenges

Since, we’ll be having multiple packages in monorepo now so you might face following challenges:

• Get the dependencies for all packages.
• Check linting for all packages.
• Check formatting for all packages.
• build_runner needs to be run throughout the project.

And majorly it’s because we have .yaml file in each dart package. So, we need to have one point of control for all those nested .yaml files inside each project or package.

Hence, every problem comes with a solution.

Or a solution to be discovered I mean 😜

To tackle this issue, there are multiple tools that can help you. The famous one is melos.

🧑🏻‍💻 Real world code-example

So, without any further ado, we’ll start of as follows:

• Setup Melos
• Setup apps for Monorepo architectures

Setup Melos

First, we’ll start off with setting up melos. Simply activate the melos globally via following command:

dart pub global activate melos

Now, create a melos.yaml file at the root such that:

apps/
    - app_1/
    - app_2/
    - app_3/

common_packages/
      - auth
      - api

melos.yaml

And a basic melos.yaml will look something like this:

# The name of the project (required) is used for displaying purposes within IO environments and IDEs.
name: counter

# A list of paths to local packages that are included in the Melos workspace. Each entry can be a specific path or a glob pattern.
packages:
  - "apps/*"
  - "packages/**"

# Recommended option for projects with Dart 2.17.0 or greater.
#
# This enables a new mechanism for linking local packages, which integrates
# better with other tooling (e.g. dart tool, flutter tool, IDE plugins) than the
# mechanism currently being used by default. Please read the documentation for
# usePubspecOverrides before enabling this feature.
#
# See https://melos.invertase.dev/getting-started#setup
command:
  bootstrap:
    usePubspecOverrides: true

Next step is to link all the packages together, which can be done via bootstrapping.

melos bootstrap

You can customize melos.yaml file with your own scripts and configurations. Please follow their official documentation here.

So, a little customized melos.yaml might look like this:

scripts:
  analyze:
    run: melos exec -- "flutter analyze"
    description: Run `flutter analyze` in all packages
  
  format:
    run: melos exec -- "flutter format . --set-exit-if-changed"
    description: Run `flutter format .` in all packages

  test:
    # Only run the test command when the package has a test directory
    run: melos exec --dir-exists=test -- "flutter test"
    description: Run `flutter test` in all packages

And just like we analyze a dart package, we can analyze melos as well:

melos run analyze

Setup apps for Monorepo architectures

Now, we’ll take a real-life flutter projects with internal packages that reflects our above approach to follow Monorepo architecture in flutter.

So now you have 2 applications, that are being maintained by other packages outside the main applications with melos.yaml file.

And that’s pretty much it. I hope you’ve learned something 😃

Thanks y’all and #happyfluttering 💙

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.