Isolates in Flutter

Introduction: Why Use Isolates in Flutter?

Flutter isolates allow developers to handle heavy, time-consuming tasks like file parsing, data processing, and complex calculations without slowing down the app’s main thread. By offloading these tasks to isolates, you can improve app performance and maintain a smooth user experience, especially in resource-intensive applications.

What are Isolates?

Isolates in Dart are unique threads that operate independently, meaning they don’t share memory but rather communicate via messages. This unique approach avoids common threading pitfalls like data corruption and race conditions, making it especially powerful for apps that require robust multithreading.

When to Use Isolates?

Isolates are suitable for:

Processing large files (e.g., JSON/XML).
Complex calculations.
Background image processing or encoding.

These are ideal when the task could otherwise freeze the app’s main UI thread.

Setting Up Your Flutter Project

Create a New Project:
1. flutter create isolate_demo
2. cd isolate_demo
Dependencies: No additional packages are required since Dart’s dart:isolate library is built-in.

Coding with Isolates

Let’s begin with creating and using isolates in Flutter.

Example: Running a Calculation in an Isolate

Create a data_processor.dart file:

import 'dart:isolate';

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

This file contains the performCalculation function, which performs a large loop calculation. This is intended to be computationally heavy, illustrating how isolates help keep the UI thread responsive.
SendPort is passed as an argument to send results back to the main isolate once completed.

Update main.dart:

import 'package:flutter/material.dart';
import 'dart:isolate';
import 'data_processor.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IsolateExample(),
    );
  }
}

class IsolateExample extends StatefulWidget {
  @override
  _IsolateExampleState createState() => _IsolateExampleState();
}

class _IsolateExampleState extends State<IsolateExample> {
  String result = "Press the button to start calculation";

  void runCalculation() async {
    ReceivePort receivePort = ReceivePort();
    await Isolate.spawn(performCalculation, receivePort.sendPort);
    receivePort.listen((data) {
      setState(() {
        result = 'Calculation result: $data';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Isolate Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(result),
            ElevatedButton(
              onPressed: runCalculation,
              child: Text("Start Calculation"),
            ),
          ],
        ),
      ),
    );
  }
}

In this example, runCalculation() spawns an isolate that performs calculations without impacting the UI thread. This keeps the app responsive, even during computation.

Advanced Example: Parsing JSON in an Isolate

Now, let’s use an isolate to parse a large JSON file. Update data_processor.dart to parse JSON:

import 'dart:convert';
import 'dart:isolate';

void parseJson(SendPort sendPort) {
  final data = '{"name": "Flutter", "language": "Dart"}';
  final decodedData = jsonDecode(data);
  sendPort.send(decodedData);
}

In main.dart, create a new function runJsonParsing() to handle JSON parsing and call it within a button press event.

void runJsonParsing() async {
  ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(parseJson, receivePort.sendPort);
  receivePort.listen((data) {
    setState(() {
      result = 'Parsed JSON: ${data.toString()}';
    });
  });
}

This approach allows JSON data to be processed independently of the main isolate, keeping the app responsive during data handling.

Communication Patterns with Isolates

Isolates typically communicate in one of two ways:

One-Way Communication: Using SendPort to send data from the isolate back to the main thread.
Two-Way Communication: Sending and receiving data between the main isolate and background isolates.

Compute Function as an Alternative

For lightweight tasks, Flutter’s compute() function is a simpler alternative to isolates. compute() is ideal for short-lived tasks that don’t require a custom isolate setup.

import 'dart:convert';

Future<Map<String, dynamic>> parseJsonInBackground(String data) async {
  return await compute(jsonDecode, data);
}

Conclusion: When to Use Isolates vs. Compute

Isolates are essential for long-running, CPU-intensive tasks. For simpler tasks, compute() provides a straightforward alternative. By using isolates wisely, you can build responsive, efficient apps.

Explore Other Flutter Topics…