What is BLoC?
BLoC (Business Logic Component) is an architectural model based on separate components (BLoC components). BLoC components contain only business logic, which can easily be shared between different Dart applications. This architecture was introduced by Google during Google I / O 2019. Currently, the BLoC architecture is the most popular Flutter architecture.
BLoC makes it easy to separate the presentation layer from the business logic, making your code fast, easy to test, and reusable. As a Flutter developer, I want to:
- know what state my application is in at any point in time
- easily test each case to make sure my app is responding appropriately
- record every single user interaction in my application so I can make data-driven decisions
- work as efficiently as possible and reuse components both within may application and across apps
- have many developers seamlessly working within a single code base, following the same patterns and conventions
- develop fast and reactive apps
There are many architectures to choose from, but deciding which one to use can be daunting, as no architecture can ever fulfill all your needs. BLoC, which was specifically developed for Flutter, is the closest to perfection for the Flutter framework, as it’s built around three core values:
BLoC is rather simple and elegant, which makes it easy to understand for both junior and experienced Flutter developers.
The ability to create complex applications out of smaller components is what makes the BLoC architecture powerful. And while these small components are discrete, it’s also easy to test any aspect of an application.
BLoC attempts to make state changes predictable by regulating when a state change can occur and enforcing a single way to change state throughout an entire application.
How does the BLoC architecture work?
This simple diagram demonstrates how the BLoC architecture works.
When a user clicks and interacts with the UI, they send an action or an event to the BLoC component. The main responsibility of the BLoC component is to interpret the action, handle it, and return a new or updated state to the UI component.
The BLoC component has to do all work related to the business logic (i.e. fetch data from the internet and process it). After it does this, it has to send the state to the UI component, which is responsible for handling the state component and showing it appropriately.
Best way to use the BLoC architecture
There are two approaches when it comes to developing mobile apps on Flutter and, in particular, developing their architecture: you can either do everything from scratch or use a ready solution.
If you develop your Flutter app’s architecture from scratch, you’ll need to create custom code and streams. This takes time, and in the long run can lead to boilerplate or spaghetti code. This will make your application hard to maintain.
Google’s Bloc library is one of the best solutions you can use for your Flutter project’s architecture.
Adding the Google Bloc library to your project
To use the Google Bloc library, add the flutter_bloc: ^2.0.1 dependency to your pub spec.yaml file. This Flutter package helps to implement the BLoC pattern in your project.
There are lots of ways to develop applications for Android and iOS with Flutter. You can use well-known architectures such as MVC or MVVM. However, because Flutter is somewhat different from other programming languages and it’s widget-centric, BLoC is commonly considered the best Flutter architecture.
The BLoC architecture is a flexible pattern that’s easy to maintain. This architecture allows you to develop an app reactively with the help of streams and sinks, so I’d suggest it for any Flutter project.
To make your development process more effective, use ready solutions for your architecture — for example, the Google Bloc library. It will help you set up your architecture fast and allow you to avoid spaghetti and boilerplate code in the future.
If you have any questions about developing cost-effective mobile apps for Android and iOS using Flutter, don’t hesitate to contact Mobindustry for a consultation.
You can Download Source Code via Github.