Flutter Architecture – best practices for your mobile projects

Flutter provides many possibilities for creating cross-platform apps for Android and iOS, making it an excellent choice for app development. Popular frameworks like MVC and MVVM can be efficiently utilized in the Flutter codebase. However, BLoC is often hailed as the best practice for Flutter architecture due to its compatibility with Flutter’s widget design and effective state management.

In this comprehensive guide, you’ll discover how Flutter’s clean architecture works, how to implement it, and find solutions to commonly encountered issues, allowing you to take a huge step forward in your Flutter app development journey.

Note: This post was last updated for 2024 to reflect the latest trends and insights in the Flutter framework.

What exactly is a mobile application architecture?

Application architecture represents a strategic framework for arranging the various components of a project.

It enables the seamless integration of business logic in a comprehensible and efficient manner, laying the groundwork for a robust Flutter application.

What should you pay attention to when designing the architecture of Flutter?

When it comes to Flutter mobile apps, we need to focus on the 3 most essential layers of any project:

1. The elements through which the user interacts,
2. The business logic executed by the application,
3. And the area where the data used in the application is retrieved.

And these are the three elements that make up the so-called “Three-Layer Architecture” used in many projects at Applover, among others.

A closer look at Flutter’s three-layer architecture in app development

The main idea is to separate the above-mentioned layers so that each area is responsible for only one thing.

The first is the presentation layer, which contains all of the Flutter app’s graphical elements, including views of individual screens and other user interface (UI) components that highlight the app’s visual and interactive features.

The next layer is the domain layer. In this area, the entire business logic responsible for operating the application functions is written out. In addition, the domain layer reacts to input from the user interface and communicates with the repository to send form data to the API.

The last layer is the data layer, which is only responsible for fetching or sending data to the APIs or reading or writing data we save locally on the user’s device.

BLoC pattern – what is it?

Adopting the BloC pattern (Business Logic Component) for state management is a recognized best practice in Flutter app development, and it aligns perfectly with Flutter’s architectural principles.

This pattern makes it easy to manage the state of screens or individual UI elements by dividing each action into states that are sent out depending on what the user is doing.

@freezed
class ExampleState with _$ExampleState {
  const factory ExampleState.initial() = ExampleStateInitial;
  const factory ExampleState.loading() = ExampleStateLoading;
  const factory ExampleState.success(ExampleModel model) = ExampleStateSuccess;
  const factory ExampleState.error(String? message) = ExampleStateError;
}

By using the Bloc template for individual screens, we can have a clear overview of the individual states into which a given screen changes and easily add new ones when the need arises.

When the user clicks and interacts with the UI, the component triggers an action. The BLoC component’s primary responsibility is to connect to the domain layer through the use case and update the state of the UI component. It also allows us to somehow separate the individual screens’ business logic from the repositories.

Use Cases – why are they crucial in Flutter’s architecture?

In clean architecture, a use case is a focused invocation of Flutter’s app business logic. It acts as a critical bridge between the domain and data layers and is essential for structured Flutter app development.

@injectable
class GetExampleFeatureDataUseCase {
  final ExampleRepository _exampleRespository;
  GetExampleFeatureDataUseCase(this._exampleRespository);
  Future<ExampleModel> call() => _exampleRespository.getExampleData();
}

The example above communicates with the repository at the data layer to retrieve items and display them on the view of our application, and as you can see, it represents a single business logic call that we can easily use in any area of our Flutter app 😃

Entions and DTOs – how do they improve data handling in the Flutter project?

We know that when we retrieve data from the web, we will most often get a response in the form of a JSON object, and directly operating on JSON files can lead to errors.

Problems usually arise when we want to extract data from a JSON-type object using the keys of its fields. This is where the DTO data model comes in handy.

Creating a DTO object will solve this problem by parsing the data directly from the “json” response to the object. Here, we use the freezed package known and loved by Flutter developers. Thus, we mapped the DTO object, and then we can map it to the entity we will use in our presentation layer.

Using DTO will avoid the situation when, for example, instead of accessing the data this way ‘json[“title”]’, you use ‘json[“titlee”]’ by mistake 🙂

@freezed
class ExampleDataDto with _$ExampleDataDto {
  const factoryExampleDataDto({
    required String exampleTitle,
  }) = _ExampleDataDto;
  factoryExampleDataDto.fromJson(Map<String, dynamic> json) => _$ExampleDataDtoFromJson(json);
}

In the DTO model, we can also implement a mapper in the form of an extension, which is a method that converts DTOs to entities. This helps us already in the data layer to map DTO models to entities that will go to our presentation layer and from it to the view.

extension ExampleDataDtoExtension on ExampleDataDto {
  ExampleData get toEntity => ExampleData(
       exampleTitle:exampleTitle
      );
}

Retrofit – why should it be the go-to for API communication in Flutter?

If you know about Android application development, you have undoubtedly heard of Retrofit, a library that allows us to implement API calls more simply and cleanly. It can handle errors that can happen on the server side of an application.

When developing apps in the Flutter framework, another perfect practice will be to use the package Retrofit to improve the queries to the APIs. It works similarly to its Android counterpart, and the implementation should not cause problems.

Adopting the best practices for your Flutter app architecture

Pre-made solutions for your architecture, like the Google Bloc library, can significantly speed up the development process. It has a low maintenance cost and a high level of adaptability. You can get your architecture up and running quickly in your Flutter application, and you won’t have to worry much about it. If you’re interested in more tips about the development, check out an article by Michał on Flutter animations.