Isolate Flutter/Dart Multithreading

It is always a good approach to do heavy work in the background while users enjoy the main thread. This way you can improve your flutter app performance and user experience.

Photo by The Creative Exchange on Unsplash

Hello guys, this is CodingWithTashi and In this shitty post we are going to talk about Isolate.

Flutter is great when it comes to UI and animation but what if your app start to freeze while

• calling heavy HTTP requests (trust me you don't want to show the progress bar for 5 minutes)
• parsing huge JSON
• database call
• image decoding etc.

In such cases, you might want to consider I S O L A T E.

What is isolate in dart/flutter?

If you have programming knowledge such as java then isolate is basically Thread/Multithreading in dart.

Note: Multithreading is process of execution code parallel in different thread so that main thread won’t have the problem.

What is isolate again?

When you run a dart or flutter program, all code is executed one after another line by line in a single thread which is the main thread.

even if you are using async/await you are still using the main thread internally using event and loop.

• Now say you want to insert 10000 records in a database or call HTTP with lots of data and responses.
• If you are using the main thread with CircularProgressBar while inserting. Your App and CircularProgressBar will freeze after some time till the insertion/API call is complete.
• Long story short, If you do too much work on the main thread, it will lead bad user experience and eventually your app might crash.

Few things to remember while using Thread/Isolate in dart?

1. You can’t communicate between threads. i.e you can’t access the main thread object including the custom object you created in the main isolate.
2. If you want to call HTTP/database you will have to create a new connection or HTTP request.
3. So how will you pass objects between threads? isolate? The answer is you will have to use SendPort and ReceivePort to communicate between threads.
4. Eg. say you want to call an HTTP request in the background and as soon as you get responses you want to send the response to the main thread so you can display it in UI then you will have to use Port as mentioned to pass data between isolate

Okay now that you have some idea about Isolate, let's talk about how can you implement isolate and improve your app performance?

• Flutter already has isolate as part of SDK so we don't need to add any packages.
• There are broadly two ways to create or use isolate.

1. Using compute function (Easy and limited)
2. Using spawn (Advanced and flexible)

a) Let's go with using compute function first

Compute function is easy and limited here you don’t need to understand about SendPort and ReceivePort as such.

Just call compute function for some task and you will get a response back.

Since you already know flutter I am going straight with an example taken from Suragch(A great flutter developer).

1. Example Without Isolate

This is a simple example with the CircularProgressBar and button when you click on the button It will do lots of computation in the main thread as result your CircularProgressBar will freeze.

Output:

2. Example With Isolate

We have taken the same example with the CircularProgressBar and button, Now when you click on the button It will do lots of computation in the background whereas your main thread is not disturbed. So CircularProgressBar will continue loading.
All change we have done is pass computationallyExpensiveTask function in compute function.

Output:

Isolate compute

Well by now you just witnessed how power full Isolates are in flutter.

b) Let's see how we can achieve Isolate using the spawn function with the same example.

• Spawn is more powerful and you will get more control over compute.
• You can control isolate such as pause, continue, stop the isolate.
• But you need to understand SendPort and ReceivePort to communicate between isolates.

ReceivePort has get function name sendPort which you can send to isolate function and start listening. eg. receivePort.listen

SendPort which will be defined in the isolate function is used to send data from the new isolate to the old isolate. eg. sendPort.send().

Remember Isolate Spawn function require ReceivePort and SendPort to communicate data betwwen isolate.

Okay, let's see the same example using the spawn function

Output:

Isolate spawn

Thanks, guys, That’s all for now, Make sure to give a clap 👏 and leave some engagement. If there is any correction or feedback feel free to leave a comment as well.

Check out more blogs from CodingWithTashi. Follow me on Twitter or Instagram.