Flutter Tips: Fetching Data From the API using BLoC

BLoC is one of flutter recommendations state management. BLoC was written by felix angelov. A few months ago, I wrote an article about the concept of BLoC state management. You can read it on this link.

Mengenal Konsep Reactive Programming dan Kaitannya dengan Flutter BLoC

The core concepts of BLoC are Events and States. To put it simply, we can call input in BLoC as Event and output as States.

In this article I will show you how to use BLoC in a simple way, I will try to Fetch data from COVID Public API and store it into a list. Let’s do it.

1. Project Setup

Create a new project:

flutter create ftips_bloc_fetch_api

When I’m writing this article, the flutter version I used in this project was Flutter Version 1, when I see the stats this article still has some readers so I decided to update to Flutter 2 and Null Safety:

Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (3 weeks ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

Add some dependencies in pubspec.yaml:

• flutter_bloc: a flutter package that helps implement the BLoC pattern.
• equatable: an abstract class that helps to implement equality without needing to explicitly override == and hashCode.
• dio: a powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc.

and create some folders to store our files, so the structure of the project will be as follows:

Project Structure

2. Find REST API

In this project I will use COVID-19 public API from api.covid19api.com, I will use only one endpoint on this project.

https://api.covid19api.com/summary

The response of this endpoint is JSON as follows:

I will convert Countries JSON array into a list in my app. After we find the REST API lets build a data model.

3. Data Model

To create a data model, you can use javiercbk.github.io/json_to_dart . After you convert the JSON, create file called covid_model.dart under lib/models and paste the codes.

4. API Provider

Create a file called api_provider.dart under lib/resources. api_provider.dart will use dio plugin to fetch data from API.

5. API Repository

Create one file as a class called api_repository.dart under lib/resources. api_repository.dart doesn’t care where the data comes from and how the data can be found.

6. BLoC

As I said before, two keywords we will find in BLoC are event and state. If you use vscode to write the code, I highly recommend you to install bloc extension.

I will write three separate files:

Event

To put it simply, we can call events as input. Every time you want to do an action you have to put it into the event. In our app, we only put GetCovidList into our event, if you want to add another event just create another class and implement the abstract class. Create a file called covid_event.dart under lib/blocs/covid_bloc.

State

If every time you want to an action you have to put it into the event, then every time you want some response you can put it into the state. In my project I will store some states like initial, loading, loaded, and error state.

BLoC

Create a file called covid_bloc.dart under lib/blocs/covid/bloc. covid_bloc.dart is the place where you can put all your logics part.

7. Pages

Last but not least, create a covid_page.dart under lib/page to display the list.

flutter run

Run the app and you will see the list, if you have any troubles here the full project.

adamnain/ftips_bloc_fetch_api

Thanks for reading,

stay safe, stay healthy.

More Flutter Tips Series:

Flutter Tips: SSL Pinning in Flutter

Flutter Tips: Build a Splash Screen with Flutter BLoC

Flutter Tips: Speed Up Your Flutter Development using GetFlutter Package

Flutter Tips : Membuat Audio Player di Flutter Kurang dari 5 Menit