BLoC Architecture

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.

Why BLoC?

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:

  • Simplicity
  • Testability
  • Power

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.

Conclusion

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.

21 Replies to “BLoC Architecture”

  1. What’s up it’s me, I am also visiting this web page daily, this
    website is truly nice and the viewers are actually sharing pleasant
    thoughts.

  2. Thanks for ones marvelous posting! I actually enjoyed reading it,
    you can be a great author.I will be sure to bookmark your blog and will come back later in life.

    I want to encourage you to ultimately continue your great posts, have a nice weekend!

  3. Hi there it’s me, I am also visiting this web page regularly, this
    website is in fact pleasant and the users are in fact sharing fastidious thoughts.

  4. I savor, cause I found exactly what I was taking a look for.
    You have ended my four day long hunt! God Bless you man. Have a
    nice day. Bye

  5. Good post however , I was wanting to know if you
    could write a litte more on this subject? I’d be very
    thankful if you could elaborate a little bit more. Many thanks!

  6. Hmm is anyone else encountering problems with the images on this blog loading?
    I’m trying to find out if its a problem on my end or if it’s
    the blog. Any feedback would be greatly appreciated.

  7. Good day! I could have sworn I’ve been to this blog before but after looking at
    many of the articles I realized it’s new to me.
    Anyhow, I’m definitely delighted I found it and I’ll be bookmarking it and checking back often!

  8. You could definitely see your skills in the article you
    write. The sector hopes for even more passionate writers like
    you who are not afraid to mention how they believe.

    Always follow your heart.

Leave a Reply

Your email address will not be published.