Why follow “Clean Architecture” in Flutter ?

When you’ve build a few mobile applications you’ll realize that any business app usually revolves around 2 things :
1. The User Interface (also called the GUI)
2. The Application Programming Interface (API)

#1 The problem

Normally, in a company you’ll have dedicated UI/UX designers that will use their power of creativity to create pretty designs and then you’ll have a bunch of Backend Devs that are working on building the API.

Now, you’re the one in the middle building the Mobile Application and you depend upon both of these. Whenever any one of these changes you’re screwed cause now you have to make changes to your app and if your code is all over the place entire portions of your code will have to change so that you can adapt to a small change.

Wouldn’t it be nice if your API code couldn’t screw with your UI code ?

That’s the idea of “Clean Architecture”.

#2 The Idea

What if we separate our app such that the GUI and API are independent of each other ? Then, whenever one changes the other is not effected or is only effected in small areas. This is why you divide your app into 3 parts :

1. Data
   This portion of your app that is purely responsible for talking to anything that’s outside your app. For example : API, database etc.
2. Domain
   This is the main part of your app which contains all the functionality of the app. If you only look at the “domain” folders in your app then you’ll be able to know exactly what the app does.
3. GUI
   This is the part of the app which is seen on the mobile screen. It encapsulates all of the state management logic.

# How does it work ?

Well, you have the GUI in your app. Whenever a user interacts with the GUI (let’s say that the user tries to login). Then a call will be placed to the state management logic which will show Loading, then the state management object has a usecase in it which will be called. The usecase then calls a repository to get it’s data. This way the whole architecture is involved.

# Folder Structure

First, you start with a main folder. I like to call it “src” for source.
This src branches out into core and modules .

core contains all the folders associated with the core part of the app.

modules contains all the folders that are features of the app.

Creating all this folder structure is a tedious task which is why I created Flutter Architecture Generator .

Using Flutter Architecture Generator to speed up Development

Here’s an example of a Flutter project that follows “Clean Architecture”.

GitHub - SushanShakya/tdd_flutter_restapi