Executing Heavy Tasks Without Blocking the Main Thread on Flutter

December 15th 2020 new story

On Flutter everything runs on a single (main) isolate and executes only one operation at a time. This means while your app is doing strenuous work, you will lose the interaction and the UI will freeze. We can create new isolates and do the heavy work there, but every isolate can reach only its own memory, and if you have to use a large set of data it won't be very optimal because we have to copy the large data from one isolate to another, and it can still block the main isolate while doing that.

Every situation requires a different approach but in most cases we can solve them on the main isolate using an event queue optimally. Let me show you one of these approaches.

In the example above, the application will be blocked during the execution. I created a simple animation to illustrate it. Every time we tap on the floating button, it executes the heavy work and the app freezes:

To execute it on the main isolate without blocking the application we have to understand how the event queue works. Actually, it is very simple; every event will be placed into a queue and it will wait until the events before it are executed. Our method takes a long time to execute, so the events after it, like drawing the screen, will wait for us and that's why animation is not smooth. To make it smooth, we can simply divide our big piece of work into small chunks and give the opportunity for other events to execute between our chunks.

We divided our work into many small chunks and the next chunk will be added to the event queue when the current chunk finishes the execution. So the other events can be executed between our chunks. We get smooth animation as a result:

As I said, every situation may require a different approach. But as we see, we can get a good result even when using a single thread.

I used this solution in my last project because I could not find a better way. Although it worked well for me, I felt like there must be a simple and better solution. So it would make me happy if you could show me a better solution or my mistakes.

You can find the code here