Asynchronous programming in Flutter/Dart

Unlike Android, which is multi-threaded, i.e. any task can be assigned to different threads and can be executed simultaneously, Dart/Flutter is single-threaded, that simply means we can’t have 2 or more threads run parallel. Only a single thread picks up event from the event queue and processes them.

In this article, we will familiarize ourselves with the concept of Asynchronous programming, which many developers find it tricky to understand at first place and how dart uses API’s like Future, async and await to implement this. But first, let's understand what synchronous programming is.

Synchronous Programming

Synchronous programming is a form of programming in which program executes line by line. When a function is called, program execution will wait until the function returns.

Let’s understand this with an example

Suppose there are 3 methods, that needs to be executed

method1()

method2()

method3()

With synchronous programming, methods will execute one by one, in the above-given sequence. It doesn’t matter, what functions are returning or how long they’ll take to execute its body.

In the above example, method1() executes first and then method2() and method3().

Now suppose method2() performs some operation like fetching data from a huge database or downloading an image. Then it might take a few seconds to execute such long-heavy tasks. And till the time method2() is executing no other subsequent function in the ‘Function Stack’ can be executed. Since with Synchronous programming, we don’t get such flexibility.

This can freeze the UI of our application and results in crashing of the application and bad UX ‘ (

Long-heavy operation here is a term used to indicate tasks, which can’t execute instantly and can take a few seconds to execute. E.g — Network operations, Image processing, file downloading etc.

Now you might be wondering how to solve such problem and improve the performance of our application, as dart doesn’t support the concept of multiple threads.

Asynchronous Programming

Asynchronous programming is a form of parallel programming which allows execution of events parallelly with a single thread which has control over all these events.

Dart uses API’s like Future, async and await to implement this. Let’s take one more example and understand this concept thoroughly.

Again suppose there are 3 methods, that needs to be executed

method1() -> Normal function

method2(callback) -> Some resource-heavy function

method3() -> Normal function

Here method2() is a long-heavy function and has a callback which means compiler won’t stop here and execute subsequent methods until method2() return some data or error.

Now you might ask how method2() is different from other methods and how it behaves differently.

Yeah right. How?

Here method2() will return an object of Future class which is similar to Promises available in other programming languages. In simple words, Future is a promise to the compiler, that it’ll give him something in return once it has something to give.

Did that go a little overboard? No worries ‘ )

Suppose method2() is returning some data from a huge database. This task might take a few seconds to execute. Here we’ll use Future that tells the compiler “Don’t wait for me to execute and return something, instead go and execute some other functions. I’ll give you the data/error once I have that with me.”

By definition Future object has three states-

1. Uncompleted — When Future object is still incompleted.
2. Completed with data — When Future object is completed and get its data.
3. Completed with an error — When Future object is completed but get an error.

Now understand the concept with some code snippet.

Here, since method2() is taking 5 seconds to execute. In the meantime method1() and method3() get execute. Here we have used the most basic form of Future.delayed() which isn’t returning anything.

Now let’s take one more scenario where our method2() is returning some Future value, where we are returning a Future Object of String type.

Notice the unexpected output, this is because at the time when our program started we didn’t have a value of resultantData. We just had a valid Future object, but we are getting the value of resultantData after the specified delay time which means that when the program ended then only we would have got the value of resultantData.

Now how to get the expected output?

For getting the value of the content variable we need to use the term await and async.

Once a compiler encounters an await keyword then it’ll only execute the code further when it gets a value/error and now since we are getting a valid value for content, we’ll change it’s type to its original type, i.e. String.

Here when compiler encountered an await keyword. It’ll pause the execution of code further and only when it gets the value for content, it’ll execute the code further.

Hopefully, now this article helps you a bit, understanding the tricky concept of asynchronous programming in the easiest possible way.

If you wanna know more about Futures in flutter. Head over to this amazing playlist by google

Till then. Happy Coding ‘)