Merge two API responses into a single Stream using Rx-Dart

Hey, after testing some of the State Management mechanisms in Flutter, currently I am learning Reactive programming with Dart and I found it very helpful and interesting to implement.

A quick confession, I am not a pro at using this. But I just thought of sharing my learning experience with you all hoping that someone may get help from this blog. So if you find any mistake in my explanation or implementation, please let me know, I am still learning :)

So, let’s begin! What comes to your mind when someone says about Rx?

In simple words, it is a mechanism to handle an asynchronous data stream. Now let’s discuss some important terms related to this mechanism.

When you deal with RxDart, you will encounter the following two words the most:

1. Stream
2. Subject

So, What is a Stream?

A Stream provides a way to receive a sequence of events. In simple words, it is a pipe through which some data are coming out; and a Stream Controller is responsible for adding data and performing some operations on the stream.

Basically, RxDart adds additional capabilities to Stream and StreamController.

Now, What is a Subject?

It is a modified version of StreamController. Currently, there are 3 kinds of Subjects available in RxDart:

1. Publish Subject: it allows you to listen to the data which are added after your subscription
2. Behaviour Subject: It allows you to listen to the data from the very last data before your subscription
3. Replay Subject: It allows you to listen to all the data in the stream, no matter when you subscribe.

RxDart gives many options to deal with Stream. The feature we will use here is Rx.combineLatest2(), which helps us to merge two streams into a single one. This feature helps you to avoid nested StreamBuilder in your widget tree. Rx.CombineLatest3 and 4 are also available, you can find more about them here: DiscoverCombine

Now, let’s focus on the main subject of the blog.

Let’s take an example:

I have two APIs- in one API, I can find all the Sports Leagues available in a country, and in the other one, some thumbnails of specific sports are defined which is not available in the first API. Now I need to display the leagues like this:

First of all, check this API, and let’s create a model with the data we need from this API.

https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?c=India **there can be any country. I am taking as India

The desired model to get a response from the API is built like this:

And now check this API where all the Sports are defined: https://www.thesportsdb.com/api/v1/json/1/all_sports.php

The desired model to get a response from the API is built like this:

Now my resultant model will be like:

It’s time to fetch the API.

Now let’s come to the Business Logic part to handle those responses and send them to the widgets to build our desired UI.

At first import this package in your pubspec.yaml: rxdart

Then define the subjects to manage the stream.

Now, the following methods will put the API responses in the stream.

And now we will combine the two streams into one, as we discussed. We will use Rx.CombineLatest2 for this.

Rx.CombineLatest2 takes these arguments like this:

(Stream<A> streamA, Stream<B> streamB,
        T Function(A a, B b) combiner) =>

Likewise in our case, we will use the method like this:

Put it all together:

In the initState blocks methods are invoked the like this:

@override
void initState() {
  super.initState();
  sportsDatabaseBloc..getSports();
  sportsDatabaseBloc..getCountryLeague(widget.countryName);
}

Now we will build our widget as per the stream data.

There is another feature called search which is also implemented in the project. The mechanism used for it is the same, you can find it here:

samrat19/Sports_DB

Thanks for reading this article. It would be great if I can get some feedback from you that will help me to strengthen my skills.

My GitHub repo:

samrat19 — Overview

Here are some links that can help you to learn more about RxDart:

Documentation on RxDart:

rxdart — Dart API docs

Why use RxDart and how we can use with BLoC Pattern in Flutter?