To understand flutter_bloc we will create a demo of hitting an API that brings in the football players details. We will create multiple states for an event and see how bloc provider and bloc builder are used to manage state of the app.

The finished product will look like this:

Ignore the UI 😅. This app is all about understanding flutter_bloc.

BLoC Architecture

A BLoC takes a stream of events as input and transforms them into a stream of states as output.

Events???States???

Events are actions that occurs as a result of the user interaction with the app such as button pressed. Events are dispatched and converted to States with the help of a function named mapEventToState . State is the information that can be read synchronously when the widget is built and might change during the lifetime of the widget.

Quick overview of the package

In flutter_bloc package we have :

BlocProvider

BlocProvider is a Flutter widget(Inherited widget) which provides a bloc to its child via BlocProvider.of(context) . Child widget gets updated whenever there is any change in the bloc(Business Logic Components).

BlocProvider(

builder: (BuildContext context) => BlocA(),

child: ChildA(),

);

BlocBuilder