MobX for State Management in Flutter Apps — Part 2

Creating a Hacker News Application with pagination using MobX for Flutter

Hello again! If you’re reading this. I’m glad that you made it till here. Building upon the previous article in this two-part series, we shall now proceed to create the application that I promised.

So, without further ado, let’s get started!

The Process

Before we get into the practice, I would recommend you to spend some time and read about Dart’s source_gen and build_runner packages, and take a look into ‘Source code generation in Dart’. These will help you understand the process better.

So, now that you are comfortable with the basics of how Source code generation in Dart actually works. We are finally ready to get our hands dirty.

Step 01 — Importing useful dependencies [ Fueling our engines]

To start with, we will import mobx, flutter_mobx, http, url_launcher as our dependencies. Also, we must import mobx_codegen and build_runner as dev dependencies. ie.

Step 02 — Checking out the Hacker News API and preparing JSON Serializers for it

Hacker News API is an open source APIs that is available for the community. You can check it out using the following link here.

From the API documentation, we get to know some important facts about it :

• The list of top-news and stories is an array of numbers, which are basically the id of the News stories belonging to this category. Thus we need a serializer that can serialize a List of integers.

• To get the details of the news corresponding to each News ID (which we got in the above-explained serializer), we’ll have to make another API call. Hence we’ll have to prepare our second serializer to get the details of each news in a structured manner.

(For the sake of simplicity, I am only storing the title, urland by key values here.)

Step 03 — Creating Models [ Where the real magic happens]

So we are finally ready to make models using our MobX toolkit. As we discussed earlier, there are three main properties of a user model, @observable, @action and @computed. Annotation helps us to specify the type of the property that is defined in the model.

for eg. @action before a function states that the function is an Action which is associated with some observable.
Similarly, @observable before a property or identifier means that it’s Observable.

Disclaimer — If one’s Flutter version is less than 1.5.*. One should not use async functions inside an action, neither an @action should be made async. Therefore, to perform any async operations, they must be defined somewhere outside the model, so that it remains completely decoupled from the Data model/store.

Step 04 — Auto Code Generation [Brace yourself]

Now if you have been wondering about how in the world are we going to generate code out of our existing model, and Why is there a need for auto source code gen?

This is why.

Using Code gen technique, we generate a part file for our model, this part file contains a class which contains an elaborate source code containing all the boundary conditions and possibilities for the actions that we have defined for our observables.

So to generate our part file, simply go to your console and run the following command:

flutter packages pub run build_runner build

and voila, we get an auto-generated part file. It’s just as simple as that.
Now that we have created the model and generated a part file for it, the only thing left to do is sit back and let the part file do its thing while we focus on building a UI.

Step 05 — Use our Model to manage state

Now to harness the services of our newly created model (or models, so to say), we’ll have to use a special kind of widget called an Observer.

The code is self-explanatory, and it simply renders a list using the Listview.builder widget and whenever the list is refreshed using RefershIndicator widget, it loads another chunk of news available and arranges them into a list.

The Result

So, our app is now ready in a fraction of time and without fussing over which things to re-render and the conditions in which the state should change.

MobX for Flutter saves a lot of time and effort put in carefully crafting a State Management Mechanism. It lets you relax and focus on creating an immersive UI while it does the work for you.

You can find the Github repository for the same project below. Feel free to use it, fork it and suggest any changes that will make it better.

aditya234/flutter_mobx_hacker_news

I hope you enjoyed this article, and are now thinking about trying MobX for Flutter to created some scalable applications. Please 👏 and follow me for new updates things I tinker with. Thanks.

Until Next time…

My name is Aditya Soni, and I work as a Software Engineer at GeekyAnts.
I would also like to mention Digvijay Wanchoo for helping me in writing my first article, he is my colleague at GeekyAnts.