Implementing Concurrency and Parallelism in Flutter Using Isolates

Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, provides powerful tools for creating responsive and high-performance applications. However, Dart, the language used by Flutter, is single-threaded. This means that long-running tasks can block the main thread, leading to janky UI experiences. To overcome this, Flutter employs the concept of Isolates for concurrency and parallelism.

Understanding Concurrency and Parallelism

• Concurrency: Executing multiple tasks seemingly at the same time. This doesn’t necessarily mean tasks are running in parallel; they might be taking turns using the CPU.
• Parallelism: Executing multiple tasks simultaneously on different CPU cores, truly running them at the same time.

Why Use Isolates in Flutter?

Flutter applications primarily run on a single thread, often referred to as the main or UI thread. Tasks that take a significant amount of time (like complex calculations, network requests, or file I/O) can block this thread, leading to a frozen or unresponsive UI. Isolates provide a way to offload such tasks to separate threads, ensuring that the main thread remains responsive.

What are Isolates?

In Flutter (Dart), Isolates are separate execution environments that have their own memory space and run independently of each other. They do not share memory, which eliminates common threading issues like race conditions and deadlocks. Communication between isolates occurs via message passing.

How to Implement Concurrency and Parallelism Using Isolates in Flutter

Step 1: Basic Isolate Creation

To create an isolate, you use the Isolate.spawn function. This function takes the entry-point function as an argument, which is the function that will be executed in the new isolate.

import 'dart:isolate';

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

  receivePort.listen((message) {
    print('Received from isolate: $message');
    receivePort.close();
  });
}

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

In this example:

• heavyComputation is a function that performs a long-running computation.
• Isolate.spawn creates a new isolate and runs heavyComputation in it.
• ReceivePort and SendPort are used for sending and receiving messages between the main isolate and the spawned isolate.

Step 2: Passing Data to an Isolate

You can pass data to an isolate by including it in the message sent via the SendPort. The entry-point function (e.g., heavyComputation) can then access this data.

import 'dart:isolate';

void main() async {
  ReceivePort receivePort = ReceivePort();
  List<dynamic> params = [receivePort.sendPort, 1000000000];

  await Isolate.spawn(heavyComputation, params);

  receivePort.listen((message) {
    print('Received from isolate: $message');
    receivePort.close();
  });
}

void heavyComputation(List<dynamic> params) {
  SendPort sendPort = params[0] as SendPort;
  int iterations = params[1] as int;

  int result = 0;
  for (int i = 0; i < iterations; i++) {
    result += i;
  }
  sendPort.send(result);
}

Here, a list containing the SendPort and the number of iterations is passed to the heavyComputation function.

Step 3: Using compute Function (Flutter Specific)

Flutter provides a convenient compute function, which simplifies isolate usage. It takes a function and a parameter as input, runs the function in a separate isolate, and returns the result.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Isolate Example')),
        body: Center(
          child: FutureBuilder<int>(
            future: compute(heavyComputation, 1000000000),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text('Result: ${snapshot.data}');
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

int heavyComputation(int iterations) {
  int result = 0;
  for (int i = 0; i < iterations; i++) {
    result += i;
  }
  return result;
}

In this Flutter example:

• compute is used to run heavyComputation in a separate isolate.
• FutureBuilder is used to display the result when it’s available.

Step 4: Example with Image Processing

Isolates are particularly useful for image processing tasks. Here’s an example of decoding an image in a separate isolate:

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Image? processedImage;

  Future<void> processImageInIsolate() async {
    final ByteData imageData = await rootBundle.load('assets/sample_image.jpg'); // Replace with your image path
    final Uint8List bytes = imageData.buffer.asUint8List();

    final img.Image? decodedImage = await compute(decodeImage, bytes);

    if (decodedImage != null) {
      final Directory tempDir = await getTemporaryDirectory();
      final File imageFile = File('${tempDir.path}/processed_image.png');
      await imageFile.writeAsBytes(img.encodePng(decodedImage));

      setState(() {
        processedImage = Image.file(imageFile);
      });
    }
  }

  static img.Image? decodeImage(Uint8List bytes) {
    return img.decodeImage(bytes);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image Processing with Isolates')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: processImageInIsolate,
                child: Text('Process Image'),
              ),
              SizedBox(height: 20),
              processedImage ?? SizedBox.shrink(),
            ],
          ),
        ),
      ),
    );
  }
}

This example does the following:

• Loads an image from assets.
• Uses compute to run the image decoding process (decodeImage) in a separate isolate.
• Displays the processed image using Image.file.

Best Practices When Using Isolates

• Minimize Data Transfer: Since isolates don’t share memory, data needs to be copied between them. Transferring large amounts of data can be inefficient.
• Keep Isolates Focused: Each isolate should have a specific, well-defined task. This makes it easier to manage and debug.
• Handle Errors: Implement proper error handling to catch and manage exceptions that occur in isolates.
• Use compute Wisely: The compute function is a convenient way to run simple tasks in isolates. For more complex scenarios, manual isolate management might be necessary.

Conclusion

Implementing concurrency and parallelism in Flutter using Isolates is essential for building responsive and performant applications. By offloading long-running tasks to separate isolates, you can prevent UI freezes and improve the overall user experience. Whether you’re performing complex computations or processing large images, understanding and utilizing isolates effectively is a key skill for Flutter developers. Use the compute function for simple tasks and manage isolates manually for more complex scenarios to keep your Flutter applications running smoothly.