Cumulations Logo

We are going to develop an app to fetch and display data from the Omdb API using Chopper and MobX.

Our objective is to make requests to the API using Chopper and manage the states using MobX. 

Let's start it one by one with the basic understanding of flutter, MobX, and Chopper. 

What is flutter?

Flutter is an SDK created by Google to develop native apps for Android and IOS. 

Flutter can build apps in very less time with stunning UI.

What is MobX?

MobX is a state management library, originally developed for JavaScript but now is there for Dart also.

It makes the connection of the reactive data of our application with the UI very simple.

As developers, we just have to see where the data is to be consumed in the UI without worrying about to keep them in sync.

What is Chopper? 

Chopper is a library to make HTTP requests inspired by Retrofit and is built on top of dart Http which, besides other things, generates code to simplify the development process for us.

Why use MobX and Chopper?

We want to use MobX and Chopper because both work with the help of codegen and generate codes automatically, thus reducing our work significantly.

First Part: Create Chopper client 

  1. First thing first, visit the OmdbApi and get your api key by registering your email address.

  2. Now the fun part begins, our journey starts from the pubspec.yaml.

  3. We have to add few dependencies in the pubspec.yaml 

chopper client

 

Add the following as dependencies:

  1. chopper

  2. mobx

  3. flutter_mobx

  4. provider

The following go as dev_dependencies as we do not want these to be shipped with our end product.

  1. chopper_generator

  2. mobx_codegen

  3. build_runner

Our next step would be to make the request to the Api.

Create a folder as data under the lib folder of your project. And create a file serializer.dart

At this point of time you would be getting some errors but don't worry they would be gone soon.

“fetchApiData.chopper.dart” is a part file that would be generated automatically by the chopper_generator.

@ChopperApi(baseUrl:’your_url’) would be the end point of your API.

@Get(path:’title’) would tell the generator that this is a get request and we want to pass title as a parameter in the function fetchData.

The last piece of code is to access the create method without instantiating the fetchApiData class.

You might be wondering what is this _$FetchApiData, it is nothing but the generated class. You can see that file once the code generates itself.

The Second Part: Create MobX model

The second part consists of managing the states using MobX. That is to display the fetched data using MobX and creating a serializer to save our data as we want.

For that, you have to create another folder named as serializer under the lib folder.

Create a file named getApiData.dart

 

Now, the serializer is created the MobX magic begins.

Create another folder named model under the lib.

Name the file as mobx.dart under the model folder and now we want to fetch the data on button press and display it on our screens.

 

The second line of the snippet makes the abstract class as a concrete class.

@observable tells the MobX generator what is to be observed and manage the states when it is changed.

@action tells when to observe the observable.

Under this, we created a function to be called when we press our button and map the data received from the API as per our serializer using the method fromJson which we created in our serializer.

Lastly, run the given command and voila all your errors gone.

flutter packages pub run build_runner watch

So now our backend part is completed.

Our next step would be to build the UI.

Third Part: Building the UI

In main.dart we just call our create method to instantiate our chopper client.

 

Create a folder named screens under the lib folder, I promise this would the last folder.

Create the post.dart to as our home screen where the data is displayed.

 

 

This is our FAB on pressed, data is fetched on click of the FAB.

 

 

This is to display the data.

Rest I think you can get. UI is up to you guys, how you want it.

I have used async loader it is totally up to you whether you want to use it or not.

One last thing you have to keep in mind is changing the following code in the fetchApi.chopper.dart

This is generated by the code gen

You have to change this to 

You can view this code at https://github.com/rishabhv1509/OmdbChopperMobx