Now we will take a look at how to handle asynchronous code execution in Dart. When working with Flutter you will do various operations such as Network Calls and Database access that should be executed asynchronously.

Importing Library in Dart

In Dart to get async support you need to import the async library.

Future

The async library contains something called Future. Future is something that is based on the observer pattern. If you familiar with Rx or Promises in Javascript you are good to go.

In simple terms, a Future defines something that will happen in the ‘future’ i.e. in future a value will be returned to us. Lets see Future in action.

Future is a generic type, i.e. Future<T>, you have to specify what type of value will we returned in the future.

We have defined a function named getAJoke that returns a Future<String>. You create a Future with the new keyword, the Future constructor takes in a function that return the value of type T. Whatever you return in the anonymous function will be the retuned value of the Future.

In main we call the getAJoke function which returns Future<String>. We subscribe to the Future by calling the then functions which registers a callback, called when the value is emitted by the Future. We also register a catchError to handle any exceptions occurred during the execution of a Future. In our example we don’t have any exceptions occurring.

Below is an example where an exceptions occurs.

Now in this example the result is returned immediately. But in production you will use Future to execute some code that takes time, for example, a network call. We can simulate that behaviour using Future.delayed().

Now if your run the program, it will take 2 second to out the result. Let’s see another example.

As you can see I have added a print statement after calling the function. In this scenario, the print statement executes first and after that the value returned from Future is printed. This is the expected behaviour we want from Future. But, what if we have a Future and we want to execute it first, before going ahed in for more execution. This is where async/await comes into action.

Never miss a post from TheTechnoCafe


Async/Await

As you can see we have added the async keyword before the curly brace of our main function on line 3 (we will come to that later). We have added await keyword before calling the getAJoke function, what this does is wait for the result to be returned from the Future before moving forward. We have wrapped our code in a try/catch block we want to catch any exception (which we caught before using the catchError callback). To use the keyword await you will have to mark the function with async keyword, else it won’t work.

That is it for this tutorial series, now you are ready to dive into Flutter and make some beautiful apps.

I highly recommend reading the official Language Tour.

Previous Tutorial << Just enough Dart for Flutter – Tutorial 03 – Classes and Generics.


Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!

2 Comments

Andy · July 3, 2018 at 9:32 pm

Great work,
Future, await async, probably,
is one of the most important aspects for Flutter and UWP,
I think, you should expand, on this,
again, good work.

jose · October 21, 2018 at 5:59 pm

Great tutorial :D, thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

one × 2 =