Asynchronous Programming with Flutter Streams

Akshay Makkar
4 min readJun 12, 2020

Building a mobile application or a web app involves sending requests to internet, reading/writing files, setting a timer and many other similar stuffs. One thing common to all of these is that you cannot block the flow of your app and ask user to wait until these tasks get completed. That results in a bad user experience.

That is where the asynchronous programming comes into the picture. Every programming language, in one or the other form allows us to implement this.

But what exactly is it?

Suppose you are building an online shopping website. You must load the website’s UI and get the products data from database/API. If you do not know asynchronous programming, you will go step by step; first you will fetch the data and then you will build your UI and fill that data.

But what if you could make a call to your database/API, meanwhile it is getting the data, you continue building the UI and when data arrives, you can fill it. This is what asynchronous programming is.

You do not hold up your resources waiting for something to get completed. You ask them what you need, then you continue doing your work; and when they return you the value, you use it.

In a way, you are doing parallel computing. (But to be honest, you are not!)

So how does Flutter allow you to achieve this?

There are two ways, Futures and Streams. Today we will be discussing the Streams.

Source: Flutter YouTube Channel

Streams provide you a series of events (data, as you might say) which you can listen to (use).

Talking broadly, when you subscribe to a stream, you get an access to the data which it is sending. You can pause, resume, or even stop your subscription any time you want. You can also process the data before using it.

This is a simple example where we have subscribed to a stream and as it sends data, we print it to our console.

But if you try the above code, you will get an exception at subscription2. This is because, by default streams are setup for single subscription.

That is where Broadcast Streams come into play.

There can be multiple listeners to a broadcast stream.

One important point to note here is that when you make a new subscription to a broadcast stream, it does not give you past data; only the data emitted from stream after that.

In case of single subscription stream, if no listener has been attached and the stream has emitted some data, it will hold onto that. Once a listener has subscribed, it will then give all the previous data (in the order it was emitted) to it and continue giving the new data as well.

Using the subscription object, we can do error handling, perform some task when the streaming is done, resume, pause and cancel the streaming. There are methods available for all of these.

Streams can also convert the data on fly. Let us see an example.

These are some of the classes that implement Stream: CountdownTimer, HttpClientResponse, HttpRequest, HttpServer, Stdin, StreamView and many more…

You can also create your own streams using the StreamController class available.

Gist available at: https://gist.github.com/akmak1103/03aa2f8fc8eeaabed3fe829bd52147d4

Here is what is happening in this code:

We define a StreamController in our DataCreator class. We add some value to this controller on regular interval inside the constructor. Then there is a getter of type Stream in this class which will expose the stream. We listen to that stream in main function to print the data and then cancel the subscription after 20 seconds.

And yes, the StreamController is closed in the dispose method :)

At last, when you have the access to your stream, you can use the StreamBuilder widget to build UI periodically as the data keeps flowing in.

Now what are you waiting for? Build your FLUTTER APP today!! ✌

--

--