You might notice in the diagram above that transferring between BLoC and state components (as well as between state and UI components) happens thanks to streams.Ī stream is a sequence of asynchronous data. Think of a BLoC as the “brain” that receives information, processes it and provides a response. UI components can be notified of states and redraw portions of themselves based on the current state.Ī BLoC (Business Logic Component) converts a stream of incoming events into a stream of outgoing states. States are the outputs of the BLoC architecture, and they represent part of your app’s common state. When designing an app, we need to step back and define how users will interact with it. They’re commonly created in response to user interactions with an interface, such as button presses or lifecycle events like page loads. 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.Įvents and actions are the inputs of the BLoC architecture. fetch data from the internet and process it). The BLoC component has to do all work related to the business logic (i.e. 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. When a user clicks and interacts with the UI, they send an action or an event to the BLoC component. BLoC architecture is rather simple, and this is what makes it easy to test and expand This simple diagram demonstrates how the BLoC architecture works. And while these small components are discrete, it’s also easy to test any aspect of an application.īLoC 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.
The ability to create complex applications out of smaller components is what makes the BLoC architecture powerful.
#Preparing media for blocs app code#
Due to this, code also becomes more reusable, as you can apply the same logic in multiple places instead of having to develop it again.īLoC is rather simple and elegant, which makes it easy to understand for both junior and experienced developers that provide Flutter app development services. The testability of the apps built with BloC architecture is better because of the separation between the logic and widgets themselves. This prevents multiple rebuilds and ensures better performance. BloC, however, defines the business logic differently by using bloc classes. This initiates rebuilds and causes performance issues. Usually what developers do is use setState several times. BLoC, which was specifically developed for Flutter, is the closest to perfection for the Flutter framework, as it’s built around three core values:īloC allows easier management for stateful widgets. 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. have many developers seamlessly working within a single code base, following the same patterns and conventions.
work as efficiently as possible and reuse components both within my application and across apps.record every single user interaction in my application so I can make data-driven decisions.easily test each case to make sure my app is responding appropriately.know what state my application is in at any point in time.Why BLoC?īLoC makes it easy to separate the presentation layer from the business logic, making your code fast, easy to test, and reusable. Currently, the BLoC architecture is the most popular Flutter architecture. This architecture was introduced by Google at Google I/O 2019. BLoC components contain only business logic, which can easily be shared between different Dart apps. BLoC (Business Logic Component) is an architectural pattern based on separate components (BLoC components).