BLoC Pattern in Flutter

15 November 2022

The Easiest way to understand BLoC Pattern in Flutter.

In this blog, you’ll get to know about core and fundamental concepts by BLoC Pattern so that you can understand and implement them easily.

Introduction

What will be covered in this tutorial:

• What is BLoC?
• When to use the BLoC Pattern
• Benefits of using the BLoC
• Alternatives to BLoC.

1. What is BLoC?

   BLoC is a design pattern created by Google to help separate business logic from the presentation layer and enable a developer to reuse code more efficiently.

   It helps developers implement the BLoC design pattern in their Flutter application. It means that a developer must know the state of an app at any time. There should be something displayed on the screen for every interaction with the app to let users know what is happening.

   Technically, for every interaction inside the application, there should be a state emerging from it. For example, when the data is fetching, the app should be in a loading state displaying a loading animation on the screen. When the internet is off, the application should display a pop-up to let the user know there is no internet connection.

   In order to learn or understand BLoC Patterns you need to have a knowledge of these four different terms.

   • State: State is the data your application is currently showing.
   • Event: An event is any action that is detected By an application. Typically, it’s user action like clicking on a button
   • Stream: Stream can be considered as a medium through which data travels. The stream is like a pipe, and the data traveling through is like water.
   • Sink: Sink can be considered as the point where you receive or consume data from the stream.

2. When to use BLoC?

   To get to know when to use BLoC and when not to use it, we must be aware of the concept of Local state and Global State.

   • Local State vs Global State

   Take an example you might have used: Imagine a login form, where the user has to enter the username and password and then there is an API communication to validate the credentials of the user upon which authentication works. So here and form of validation on the login form is considered as Local state since its scope is applied to this component only and the rest of the application has nothing to do with it. While the API communication upon which the authentication of the user was dependent is considered a Global state since it’s upon this authentication the entire scope of the app is dependent.

   Redux is also a state management approach. For dealing with local state BLoC is best recommended.

3. What is the benefit of using the BLoC Pattern?

   • Separation of Concerns: The User Interface and the business logic are no longer tightly coupled which makes it easier to make changes to the user interface without modifying the business logic. It keeps the UI simple and dumb.
   • Testing: It is easier to the Business logic now because we do have to worry about how it fits with the user interface.
   • Reactive Programming: Since the BLoC makes use of streams it helps us take advantage of the operators like distinct, where, asyncMap, switch map e.t.c. They help in writing clean and concise code.

4. Alternatives to the BLoC

   What other options do we have to manage the state in flutter applications

   • Redux
   • Mobx
   • Scoped Model
   • Flutter Hooks
   • Firebase
   • RxVMS(Dependency Injection/Service Locator)