Integrating BLoC in the UI

In previous lessons, we learned how to create BLoCs for our Flutter application. Now, it’s time to take the next step and integrate them into our UI. For this purpose, we’ll use the flutter_bloc library’s widgets, which will help us to connect our BLoCs to our UI with ease.

The following four widgets will use different widgets from the flutter_bloc library:

• App widget

• HomeScreen widget

• LikeButton widget

• LikesScreen widget

Let’s dive into each widget and see how it uses widgets from the flutter_bloc library:

The App widget

The App widget is located at the top of our widget screen. Since we want our BLoC state to be available to all widgets in the app, it makes sense to add a BlocProvider widget to this widget.