Elevate user experience with Background Isolate Unlock and utilize real multithreading in Flutter Muhammad Alif Akbar | Senior Software Engineer at 

Hello, I’m Alif Senior Software Engineer, Mobile at Grab (2021 - Present) linkedin.com/in/muhammad-alif-akbar Software House → E-Commerce → 

Table of Contents 1. What is Multithreading 2. What is Isolate 3. Background Isolate 4. Quick Demo 

What is Multithreading 

Process (An App) Instance of a program that is executing on a computer / phone 

Thread (Sub Process) Sub-component of a process that run/execute tasks Allocate variable “a” Set variable “a” to 100 Allocate variable “b” Set variable “b” to 200 Allocate variable “sum” Set variable “sum” to a + b Output variable “sum” 

Main Thread / UI Thread / Main Loop Thread that run main tasks, usually related to UI events Draw Splash Screen Check Token Draw Home Screen 

Main Thread / UI Thread / Main Loop Thread that run main tasks, usually related to UI events Draw Splash Screen Check Token Draw Home Screen View All Click 

Main Thread / UI Thread / Main Loop Thread that run main tasks, usually related to UI events Draw Splash Screen Check Token Draw Home Screen View All Click 1s 1s 1s 1s 

Main Thread / UI Thread / Main Loop Thread that run main tasks, usually related to UI events Draw Splash Screen 1s Get Profile Draw Home Screen View All Click 5s 1s 1s 

Multi-Thread Use of multiple concurrent threads within a single process Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report 

MULTI-THREAD ALLOW US TO DELEGATE LONG RUNNING TASK INTO DIFFERENT THREAD, SO THAT UI (THREAD) WON’T BE FREEZED.” “ 

Multi-Thread Problem Race conditions, deadlocks, and synchronization Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report 

Multi-Thread Problem Race conditions, deadlocks, and synchronization Shared Space (Memory & State) Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report 

Multi-Thread Problem Race conditions, deadlocks, and synchronization Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report Shared Space (Memory & State) 3 1 2 

Multi-Thread Problem Race conditions, deadlocks, and synchronization Read Token Draw Splash Screen Check Token Draw Home Screen Get Profile Get Statistic Report Shared Space (Memory & State) 

Multi-Thread Problem Race conditions, deadlocks, and synchronization Shared Space (Memory & State) x0 +1 x10 Output +1 +2 

MULTI-THREAD, WHILE VERY USEFUL, IT INTRODUCES ADDITIONAL COMPLEXITIES AND POTENTIAL ISSUES.” “ 

What is Isolate 

FLUTTER (WAY OF WATER) MULTI-THREADING 

Grab’s Flutter Adoption Journey Q4, 2019 Q2, 2020 Q3, 2020 Q1, 2022 

Async/Await is not Isolate It’s just postponing less crucial task to later time Draw Splash Screen 1s Get Profile Draw Home Screen View All Click 5s 1s 1s 

Async/Await is not Isolate It’s just postponing less crucial task to later time Draw Splash Screen Await Get Profile Draw Home Screen View All Click 1s 5s 1s 1s Async Get Profile 1ms 

You could see the screen is frozen, due to long running task on main thread.” “ 

What is Isolate As implied from the name, It’s an executor with Isolated Space Main Isolate Draw Splash Screen Check Token Draw Home Screen Read Token Get Profile Get Statistic Report Secondary Isolate 

How Isolate Communicate Through communication (send/receive) ports Main Isolate Draw Splash Screen Async Get Profile Draw Home Screen Exec Get Profile Get Statistic Report Await Get Profile View All Click Await Get Profile Exec Get Profile Communication Ports Secondary Isolate 

Talk less, Code More! 😡 Fortunately, we already have easy access to Isolate. Using compute function. 

Background Isolate 

Previous Isolate Limitation Communication to Platform level need to be done on Main Isolate Main Isolate Secondary Isolate Communication Ports Method Channel 

Previous Isolate Limitation Communication to Platform level need to be done on Main Isolate Main Isolate Background Isolate Communication Ports Method Channel 

Show Me Codes!😡 You have to register which isolate working as Background Isolate 

How to retrieve the data? 🧐 No easy way to do it (yet). You have to implement the Dart ports. 

Still confused? Read resources below at your own pace to get more understanding. When you do, notice who wrote the answer on SO. 😉 

Scenarios where it’ll be helpful Why background Isolate is important Image Processing / Camera Filters Game 3D with GPU Acceleration High Throughput Real Time Tracking/Comms Creating camera filters, image detection and recognitions, written purely on Dart could be feasible. Todays, you could build simple Games using Flutter. There is micro framework called flame. Utilizing background Isolate, you could create more complex game with access to GPU without to have to burden the main thread. For specific use cases, where you might ignore comms cost/efficiency. You could communicate with servers as frequent as you want. Without glitching the UI due to large JSON parsing. 01 02 03 

Quick (Recorded) Demo 

Show Me The Result!🧐 Loading Animation While Doing Long Running Task 

Show Me The Result!🧐 Frame Rate Performance 

Show Me The Result!🧐 Frame Rate Performance It’s very subtle but you could notice there’s a frame skip while transitioning on left image.” “ 

Try to inspect App screen’s performance and identified any long running task that block UI thread. Moving long running task to different Thread/Isolate can help to deliver smoother UX to user. Multithreading concept in Flutter is known as Isolate. Which creates a simulated concurrent space, which has different/isolated memory and state. A completely background Isolate is now possible since Flutter 3.7.0. Key Takeaways 

Muhammad Alif Akbar Mar 18, 2023 | Baparekraf Developer Day • 2023 Contact [email protected] / @muh.alifgiant