Guide to Implementing BLoC Architecture in Flutter

Flutter is a highly popular open-source mobile application development framework created by Google. It allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase.
According to the latest survey conducted by Google, over 50% of Flutter developers have been using the framework for less than a year. Of these, nearly 90% have reported being "satisfied" or "very satisfied" with Flutter. In addition, Flutter has been recognised as a top-performing framework in terms of developer satisfaction and adoption by multiple industry reports, such as the "2020 Developer Survey Results" by Stack Overflow and the "2021 Mobile App Development Frameworks" report by GoodFirms.
One key aspect of building high-quality Flutter apps is implementing a robust architecture. One popular choice for architecture in Flutter is the BLoC (Business Logic Components) pattern.
We will begin by understanding the key concepts of the BLoC pattern and how it fits into the overall architecture of a Flutter app. We will then delve into the process of setting up a Flutter project with the BLoC pattern. We will also see the use of streams and sinks to communicate between the presentation layer and the business logic.

What is the BLoC Pattern?

The BLoC (Business Logic Components) is a design pattern that allows developers to separate the business logic and presentation layers of their Flutter app. This separation of concerns helps improve the overall structure and maintainability of the code. It eases the testing and scaling of the app over time.
The BLoC pattern is based on the concept of reactive programming, which involves building systems that can automatically respond to changes in data. In the context of a Flutter app, this means that the app can automatically update the user interface based on changes in the underlying data.
One key advantage of the BLoC pattern is that it allows developers to easily manage and maintain the business logic of their app in a separate layer from the presentation layer. This way, the business logic can be easily isolated and tested separately from the user interface.
Additionally, the BLoC pattern allows for a more reactive and efficient app. The user interface can be updated automatically in response to changes in the data, without the need for manual updates.

Evolution of the BLoC Pattern

The BLoC (Business Logic Components) pattern has evolved as a popular choice for architecture in Flutter app development. It was introduced by Google developer, Paolo Soares, at the Flutter Europe conference in 2019. The aim was to improve the separation of concerns in Flutter app development and ease the management and maintenance of the code over time.
Since its introduction, the BLoC pattern has gained widespread adoption in the Flutter community. Many developers see it as a powerful and flexible way to structure their apps.
The development of third-party libraries and tools is a key aspect of the evolution of the BLoC pattern. It has made it easier to implement the pattern in Flutter apps. For example, the popular Flutter BLoC library provides a set of pre-built components and utilities for implementing the BLoC pattern in your app to start and streamline the development process smoothly.

Components Involved in the BLoC Pattern

The BLoC (Business Logic Components) pattern consists of three main components:

Events
These are inputs to the BLoC that represent actions taken by the user or changes in the app's state. Events are typically triggered by user interactions, such as clicking a button or changing a form field. They are passed to the BLoC for processing.
Suppose a login form has a text field for the user's email address and a button to submit the form. When the user clicks the submit button, an event could be triggered to pass the email address to the BLoC for validation and processing.

BLoC
This is the central component of the pattern. It handles the business logic and communicates with external data sources. The BLoC processes the events and determines the appropriate response, such as making a network request or updating a database.
For example, the BLoC in the login form example might validate the email address to ensure it is in the correct format. Then it may request the network to authenticate the user with the provided email and password.

Streams
These are the outputs from the BLoC that represent the app's state and can be used to update the user interface. Streams are used to transmit data from the BLoC to the presentation layer. It allows the app to reactively update the user interface in response to changes in the data.
Suppose the login form example uses a stream to transmit the login status (e.g., "pending", "success", "error") to the presentation layer. The presentation layer uses this information to show a loading indicator while the login request is pending. It displays a success message upon successful login or an error message upon failed login.
Here is an example that shows how these components are implemented in code using the Flutter BLoC library:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// Define the events

enum LoginEvent { emailChanged, passwordChanged, login }

// Define the BLoC

class LoginBloc extends Bloc {

  @override
  String get initialState => "";

  @override
  Stream mapEventToState(LoginEvent event) async* {

    switch (event) {
      case LoginEvent.emailChanged:
        yield "email changed";
        break;

      case LoginEvent.passwordChanged:
        yield "password changed";
        break;

      case LoginEvent.login:
        yield "login";
        break;
    }
  }
}

// Define the presentation layer

class LoginForm extends StatefulWidget {
  @override
  LoginFormState createState() => LoginFormState();
}

class _LoginFormState extends State {

  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {

    final loginBloc = BlocProvider.of(context);

    return Column(
      children: [
        TextField(
          controller: _emailController,
          onChanged: (value) {
            loginBloc.add(LoginEvent.emailChanged);
          },
        ),

        TextField(
          controller: _passwordController,
          onChanged

Benefits of Using the BLoC Pattern in Flutter Development

There are several advantages to using the BLoC (Business Logic Components) pattern in a Flutter application:

Improved separation of concerns: The BLoC pattern allows developers to separate the business logic and presentation layers of their apps. This improves the overall structure and maintainability of the code.

Reactive updates: The use of streams in the BLoC pattern allows for a more reactive and efficient app. The user interface can be updated automatically in response to changes in the data rather.

Testability: The separation of concerns in the BLoC pattern makes it easier to test the business logic of the app. It can be isolated and tested separately from the presentation layer.

Flexibility: The BLoC pattern is flexible and can be used in a variety of app architectures and scenarios. It can also be easily integrated with other architectures, such as the Redux pattern, which is commonly used in web development.

Community support: The BLoC pattern has gained widespread adoption in the Flutter community and has a strong ecosystem of third-party libraries and tools. This makes it easier for you to implement and use in your projects.

Clean Architecture vs BLoC Pattern

There is a lot of debate among Flutter developers about which architecture pattern is best suited for their projects. One popular option is clean architecture, which emphasizes the separation of concerns, maintainability, and testability in software design.
Clean architecture is a general-purpose pattern that can be applied to a variety of platforms and languages, and it does not require reactive programming. It is based on the idea of organising the code of an app into distinct layers: the core business logic is at the centre, and the presentation and data layers are on the outside. It ensures that the business logic is isolated from changes in the external environment, such as the UI or database. It makes the app easy to maintain and test over time.
Clean architecture is for general purposes. It can be applied to a variety of platforms and languages. It does not specifically require reactive programming and can be implemented using a variety of approaches.
In contrast, the BLoC is a reactive and modular architecture pattern specifically designed for use with Flutter. It is focused on managing the business logic and state of a Flutter app. It is based on the concept of reactive programming, which involves building systems to automatically respond to data changes.

Flutter Libraries to Build BLoC-compliant Applications

Several libraries can be used to build a BLoC-compliant app. Here are a few examples:

1. flutter_bloc: This is a popular library for building BLoC-compliant apps in Flutter. It provides a simple and reactive way to manage the state in Flutter applications. Some open-source applications that use flutter_bloc include:

• Flutter Gallery: This is a collection of Flutter demos and examples that show the capabilities of the Flutter framework. It includes many BLoC implementations for managing the state. For example, the GalleryOptions BLoC is used to store and update the user's selected theme and text scale preference.
• Flutter Login: This is a Flutter package that provides a customisable login screen with support for email/password, social login (Google, Facebook, Twitter), and anonymous login. It uses flutter_bloc to manage the state of the login process, including the loading and error states.

2.rxdart: This is a Dart library for reactive programming used to build BLoC-compliant apps in Flutter. It is based on the popular Rx (ReactiveX) library. It provides a set of powerful tools to work with asynchronous data streams. Here are the examples of open-source applications that use rxdart:

• Flutter Todos: This is a Flutter app that demonstrates how to build a to-do list using the BLoC pattern. It uses rxdart to manage the state of the to-dos, including the loading, error, and completion states.
• Flutter Hacker News: This is a Flutter app that displays the top stories from Hacker News. It uses rxdart to manage the state of the stories, including the loading, error, and refresh states.

3.BLoC: This is another popular library for building BLoC-compliant apps in Flutter. It is based on the concept of "stateful widgets." It provides a simple and reactive way to manage the state. Here are the examples of open-source applications that use BLoC:

• Flutter Weather: This is a Flutter app that displays the current weather for a given location. It uses BLoC to manage the state of the weather data, including the loading, error, and refresh states.
• Flutter Food Delivery: This is a Flutter app that demonstrates how to build a food delivery app using the BLoC pattern. It uses BLoC to manage the state of the orders, including the loading, error, and refresh states.

There are many other libraries out there that can be employed to build BLoC-compliant applications. You can also refer to this repository to get started with a template for your next mobile application.

Comparison between Single BLoC and Multiple BLoCs

When implementing the BLoC (Business Logic Component) pattern in a Flutter app, one question that developers often face is whether to use a single BLoC or multiple BLoCs. This decision can have significant implications for the design and scalability of the app, and there are pros and cons to both approaches.
A single BLoC architecture refers to using a single instance of a BLoC class to manage the business logic and state of an entire app or a large portion of it. This approach can help to simplify the codebase and make it easier to manage, as all of the business logic is contained in a single class.
On the other hand, using multiple BLoCs refers to dividing the business logic of an app into multiple BLoC classes, each with a specific responsibility. This approach can help to divide the business logic into more manageable chunks, but it can also result in more boilerplate code and potentially increase the complexity of the app.
In this section, we'll explore the pros and cons of each approach and discuss the factors to consider when deciding between a single BLoC and multiple BLoCs.

Single BLoC

Advantages

• Simplicity: Using a single BLoC can make managing your application's state easier, as you only have one place to manage your state updates and listeners. This can be especially useful for smaller, less complex applications.
• Reusability: If you have multiple widgets that need to access the same data, a single BLoC can reuse them without duplicating the BLoC code.

Disadvantages

• Complexity: As your application grows and becomes more complex, managing all of your state updates and listeners in a single BLoC can become more difficult. This can lead to code that is harder to maintain and debug.
• Tight coupling: If you use a single BLoC to manage all of your application's state, the widgets in your app may become tightly coupled to that BLoC. This can make it harder to reuse those widgets in other contexts or make app changes without affecting the entire BLoC.

Multiple BLoCs

Advantages

• Modularity: Using multiple BLoCs allows you to divide your state management into smaller, more manageable pieces. This makes it easy to understand and maintain your code, especially in large and complex applications.
• Reusability: By dividing your state management into smaller pieces, you can reuse them in different parts of your app or other apps.
• Loose coupling: Multiple BLoCs can decouple your widgets from each other. This way, you can change or remove one widget without affecting the others.

Disadvantages

• Complexity: Managing multiple BLoCs can be more complex than using a single BLoC, as you must manage the interactions between the different BLoCs and ensure they work correctly together.
• Code duplication: If you have multiple widgets that need to access the same data, you may end up duplicating the code for the BLoCs that manage that data.

When deciding whether to use a single BLoC or multiple BLoCs, consider the size and complexity of your application. Also, focus on your goals for reusability and modularity. In general, multiple BLoCs can be a good choice for large, complex applications, while a single BLoC may be sufficient for small, simple apps. For example, a large, complex app with many developers working on it, such as ride-sharing apps like Uber or Ola, might benefit from using multiple BLoCs to divide the business logic into more manageable chunks. On the other hand, a smaller, simpler app might be able to get by with a single BLoC.

Where to go from here

Now you know how to incorporate the BLoC architecture into your mobile applications. We've also compared it to the Clean architecture, and gone through the pros and cons of using BLoCs. If you're looking to further optimise your mobile application architecture for your needs, Wednesday can help you with that. We also offers services to audit your codebase on different parameters. Write to us at hello@wednesday.is to know more.

Originally published at https://www.wednesday.is.