Handling Network Calls like a Pro in Flutter

Sahil Kumar
Jul 6 · 5 min read

Some Prerequisites

As we are going to implement this app using BLOC pattern you should know the basics of Streams and StreamControllers. Some basic knowledge of HTTP response codes and repository pattern will also be going to help you understand this more easily.

Basic Architecture of our Application

Steps we are going to follow in this article :

  1. Creating an API base helper class.
  2. Custom app exceptions.
  3. MovieResponse model classes.
  4. A generic API response class.
  5. A repository class to fetch data from APIs.
  6. A bloc class for consuming UI events and sending streams.
  7. A UI to display all the data.

A deep breath here, just before we dive into absolute bliss.


Creating an API base helper class

For making communication between our Remote server and Application we use various APIs which needs some type of HTTP methods to get executed. So we are first going to create a base API helper class, which will be going to help us communicate with our server.


Creating custom app exceptions

An HTTP request on execution can return various types of status codes based on its status. We don’t want our app to misbehave if the request fails so we are going to handle most of them in our app. For doing so are going to create our custom app exceptions which we can throw based on the response status code.


Creating MovieResponse model classes

As we are working with TMDB to get our popular movies. we have to create a basic dart model class which will be going to hold our movie data.


Creating a generic ApiResponse class

In order to expose all those HTTP errors and exceptions to our UI, we are going to create a generic class which encapsulates both the network status and the data coming from the API.


Creating a repository class to fetch data from APIs

As I stated at the start that we are creating this app with a thought of implementing a good architecture. We are going to use a Repository class which going to act as the intermediator and a layer of abstraction between the APIs and the BLOC. The task of the repository is to deliver movies data to the BLOC after fetching it from the API.


Creating the Movie Bloc

For consuming the various UI events and act accordingly, we are going to create a movie bloc. Its task is just to handle the “fetch movie list” event and adding the returned data to the Sink which then can be easily listened by our UI with the help of StreamBuilder.


Creating a Movie Screen to display popular movies

In order to react to the states of our data, we going to create a Stateful widget called MovieScreen and listen to all that state changes using the StreamBuilder.

  • Disposed our MovieBloc object in dispose() method which going to release all our streams.
  • Created a StreamBuilder widget in the body of our Scaffold which going to take the _bloc.movieListStream as the stream and starts listening to any changes in it.
  • Handled all the three states of our data using a Switch Case and returning a widget as per the data state.

Bonus

This practice is not limited to BLOC pattern, It can be easily used with other state management techniques too such as Scoped Model and Provider e.g.:


Do clap 👏 the post as much as you can to show your support and motivate me to write more.

~ Happy Fluttering ~

Flutter Community

Articles and Stories from the Flutter Community

Thanks to Dhruvam Sharma.

Sahil Kumar

Written by

Android Developer | Flutter is love

Flutter Community

Articles and Stories from the Flutter Community