Lære Isolates for Heavy Computation in Flutter

When building Flutter apps, you want your user interfaces to stay smooth and responsive, even while your app is performing complex or time-consuming work. Dart's single-threaded event loop means that if you run heavy computations directly on the main thread, your UI can stutter, freeze, or become unresponsive. To solve this, Dart provides a feature called isolates, which let you run code in parallel, on a separate thread of execution, without blocking the main thread. Isolates are especially useful in Flutter for offloading CPU-intensive tasks so that your UI remains fluid and interactive.

main.dart


              12345678910111213141516171819
            
import 'dart:async';
import 'dart:isolate';

void heavyComputation(SendPort sendPort) {
  int result = 0;
  for (int i = 0; i < 100000000; i++) {
    result += i;
  }
  sendPort.send(result);
}

Future<void> main() async {
  ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(heavyComputation, receivePort.sendPort);

  print('Doing other work on main thread...');
  int computationResult = await receivePort.first;
  print('Result from isolate: $computationResult');
}

When you use an isolate, you need a way to communicate between the main thread and the isolate. Dart isolates do not share memory, so you send messages using ports. The main thread creates a ReceivePort, which gives you a SendPort to pass into the isolate. The isolate can then send results or updates back to the main thread using this port. This message-passing model allows you to transfer data between isolates efficiently and safely.

main.dart


              123456789101112131415
            
import 'dart:isolate';

void computeSquare(List<dynamic> args) {
  int number = args[0];
  SendPort sendPort = args[1];
  int square = number * number;
  sendPort.send(square);
}

void main() async {
  ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(computeSquare, [12, receivePort.sendPort]);
  int result = await receivePort.first;
  print('Square is: $result');
}

Note

Using isolates for heavy computation helps you avoid UI jank and keeps your Flutter apps responsive. Always consider isolates when performing tasks that would otherwise block the main thread, such as complex calculations or data processing.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 4

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you show me an example of how to use isolates in Flutter?

How do I send data back and forth between the main thread and an isolate?

What are some common use cases for isolates in Flutter apps?

Sveip for å vise menyen

main.dart


              12345678910111213141516171819
            
import 'dart:async';
import 'dart:isolate';

void heavyComputation(SendPort sendPort) {
  int result = 0;
  for (int i = 0; i < 100000000; i++) {
    result += i;
  }
  sendPort.send(result);
}

Future<void> main() async {
  ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(heavyComputation, receivePort.sendPort);

  print('Doing other work on main thread...');
  int computationResult = await receivePort.first;
  print('Result from isolate: $computationResult');
}

main.dart


              123456789101112131415
            
import 'dart:isolate';

void computeSquare(List<dynamic> args) {
  int number = args[0];
  SendPort sendPort = args[1];
  int square = number * number;
  sendPort.send(square);
}

void main() async {
  ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(computeSquare, [12, receivePort.sendPort]);
  int result = await receivePort.first;
  print('Square is: $result');
}

Note

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 4