How To Structure Flutter App When Using BLoC Pattern

This entry is part 1 of 2 in the series Developing Flutter Apps with BLoC Pattern

When using BLoC as the state management technique for your Flutter app, your best bet is to open a folder called packages and put all of the code for all of your BLoCs into it.

BLoC in Packages Folder

I’ve got this idea from Felix Angelov and it serves me well. Previously, I had bloc code in folder blocs, screens using it in ui/screens, repository for data in /repositories, models in /models and so on. The idea of blocs in packages folder is the opposite: act as if you were really creating a standalone package for someone else to use, like you were going to publish it on pub.dev.

Bloc architecture in Flutter apps

Bloc architecture in Flutter apps

The image above shows a mix of blocs in their own folder /blocs and the blocs that are in the /packages folder. The former are the legacy code and they are being transferred to the /packages architecture.

Basic BLoC Structure with Models

The basic blog will be the same regardless of the encompassing folder. In the image below, we see a Login bloc with models for email and password.

Single bloc in Flutter app

Single Login bloc in Flutter app

There is not much code for this bloc at this place as the rest of it is dispersed throughout the entire app. This becomes error prone and tiresome after you have a few dozen of these to handle.

Structure of Specific BLoC Files in a Package

Now let us see what does a bloc within a package look like:

Bloc under packages has much more code because it is centralized

Bloc under packages has much more code because it is centralized

A much better approach, I must say. Everything is tucked away in its own folder or subfolder; if you do not want to see it, it easily becomes invisible.

This approach favors really small pieces of code. We will show on screen only surveys_screen.dart, and here is what its code looks like:

Surveys screen using a Bloc architecture

Surveys screen using a Bloc architecture

Notice that the screen that we want to show, SurveysBloc, is within a BlocProvider. It provides the environment for the actual form on the screen, which is in SurveysForm widget.

Also note that even a very small widget such screen title gets its own file and class SurveysAppBar in surveys_app_bar.dart:

Surveys appBar in its own class and file

Surveys appBar in its own class and file

If you were wondering what does the app or the above code do, here is the screen it produces:

Forms screen with bloc structure in a Flutter app

Forms screen with bloc structure in a Flutter app

The exact functioning of the bloc code deserves a blog post of its own, so let us now turn to the additional structure of the app.

The UI Folder — Graphics Elements on the Screen

User Interface elements get their own folder. There will be, typically, three subfolders in it:

screens The majority of your apps files will be in these folders.
themes Usually, there are three or four files here, one for themes in general, the others to specify the concrete values for the theme.

Using themes with blocs is extremely easy, once you set it up, you can forget about it and still have it working like a charm.
widgets The heart and soul of Flutter, the widgets are small parts of screen property that are neither very complicated nor long. Not a full blown class and not just one line of Text.

Good candidates for widgets are app background, button text style, customized buttons of all kinds, euro sign, avatars and so on. If you use the same widget in two places in the app, put it into its own file and place into this folder.

Structure of Screen Folders

Here is what a typical structure of  screens files looks like:

Welcome screen structure of files

Welcome screen structure of files

The widgets specific for the Welcome screen are WelcomeText and NewText so we place them here, in the /widgets subfolder. Notice that there is a /view subfolder beneath /welcome and that there is /widgets beneath that /view. It is granularity once again — if you are working on the Welcome screen, you will find all of its files in one place and if not, you just look at the closed subfolder and scan on to something else to fix.

The utils Subfolder

The utils are the files that are not widgets — that is, have no presence on the screen, but still have some useful function. Basic examples are delete keyboard, dio logging or hex to color conversion. You can also use utils to convert latitude and longitude to string, control input data with regex, create a singleton and so on.

Here is what it looks like in a larger app:

Utils folder with BLOC structure of a Flutter app

Utils folder with BLOC structure of a Flutter app

These are the main parts of a Flutter app structured around the BLoC pattern. Code is taken from one of my apps I create for customers. If you want your app to be structured in this way, please contact me here or on LinkedIn.

Series NavigationFlutter BLoC Example and Data Connection Checker Plugin
This entry was posted in Flutter, Programming and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.