FLUTTER BLOCS HOW TO
FLUTTER BLOCS UPDATE

The bloc dependency is used because we also used cubit in the example. So Cubit is more simplified in which we only have to define functions, and states while in Bloc we would have to define the events, states and the EventHandler implementation.ĭependencies : bloc : ^8.0.2 cupertino_icons : ^1.0.2 equatable : ^2.0.3 flutter : sdk : flutter flutter_bloc : ^8.0.1 http : ^0.13.4 dev_dependencies : flutter_lints : ^1.0.0 flutter_test : sdk : flutterĬlick CTRL + S to save, and you have successfully added the above dependencies to your Flutter application!

FLUTTER BLOCS UPDATE

Those functions will then trigger a state change which will update the UI. But as you can see in the diagram below, in Cubit we don’t have events anymore instead that would be replaced by functions. Both Cubit and Bloc extend the same class which is BlocBase so they have the same functionality. Since Bloc contains some boilerplate code, another simplified version of it was created called Cubit. We will see this in the example later on.

Also, when we update the states, we also update the UI. The Bloc will initially have a state called TodoInitial and then when we fetch the data from the repository, we can update the state to TodoLoaded. Then the UI will trigger the event TodoFetched to the Bloc. To understand it more, let’s say we want to fetch data from some kind of service. Then the data layer will return a response and the Bloc will trigger state changes. The data access layer will be the last layer in the application, it can contain a repository class which will act as an abstract class above the data access object classes.Īs you can see in the below diagram, the UI will send events to the Bloc, which will then send the requests to the data layer. Using Bloc, we can easily seperate the application into multiple layers, first we would have the presentation layer which would contain the UI/Views/widgets, then the business logic layer (Bloc) which will take care about the state changes and will have a dependency on the data access layer. Bloc has many advantages, but one of it’s main advantage is that it enables us to easily implement seperation of concern. We have also seen the provider state management which in simple terms, is a wrapper around Inherited Widgets.Īnother statement management is Bloc which stands for Business Logic Components and it is a widely used state management in Flutter. In previous tutorials we have seen the use of setState() which will trigger the build() method and update the UI with the new state. We will show an example of using both Cubit and Bloc.

FLUTTER BLOCS HOW TO

In this guide, we will learn about the Bloc Design Pattern and how to use it in a Flutter application.

Flutter blocs