Image picker using Dart Isolate

3 min readMar 13, 2024

In Flutter development, handling image picking efficiently is crucial for a smooth user experience. Dart isolates play a vital role in achieving this by allowing background tasks to run concurrently without affecting the UI responsiveness. In this article, we’ll explore how to leverage Dart isolates to implement efficient image picking in Flutter applications.

Understanding Dart Isolates:

Dart isolates are lightweight, independent threads of execution that run concurrently with the main thread of a Flutter application. Unlike threads in other programming languages, isolates do not share memory, which makes them ideal for performing tasks in parallel without the risk of data corruption.

Solution with Dart Isolates: By offloading image picking tasks to a separate Dart isolate, we can ensure that the UI remains responsive while the image is being processed or retrieved. Dart isolates allow us to perform these tasks in the background without blocking the main UI thread, resulting in a smoother user experience.

Implementation: To implement image picking using Dart isolates in a Flutter application, follow these steps:

Setup Isolates: Initialize a background isolate to handle the image picking task.
Invoke Image Picker: Use the ImagePicker package to select an image from the device’s gallery or camera.
Pass Data Between Isolates: Communicate the selected image path from the background isolate to the main isolate using SendPort and ReceivePort.

Data Recovery: The image picker plugin offers a retrieveLostData() method to handle lost data scenarios effectively. Developers can utilize this method to recover any lost data, ensuring a seamless user experience by handling interruptions during the image picking process.

Asynchronous Handling: With the retrieveLostData() method operating asynchronously, developers can efficiently retrieve lost data without blocking the UI thread. This asynchronous operation enhances app responsiveness, especially during potentially time-consuming tasks like data recovery, contributing to a smoother user interaction in Flutter applications.

Here’s a simplified example demonstrating the implementation:

import 'dart:developer';
import 'dart:isolate';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

class IsolateImagepicker extends StatefulWidget {
   const IsolateImagepicker({super.key});

  @override
  State<IsolateImagepicker> createState() => _IsolateImagepickerState();
}

class _IsolateImagepickerState extends State<IsolateImagepicker> {
  File? _imageFile;
  final ImagePicker picker = ImagePicker();

  @override
  void initState() {
    super.initState();
    getLostData();
  }

  Future<void> getLostData() async {
    final LostDataResponse response = await picker.retrieveLostData();
    if (response.isEmpty) {
      return;
    }
    if (response.file != null) {
      _handleFile(File(response.file!.path));
    } else {
      _handleError(response.exception);
    }
  }

  void _handleFile(File file) {
    setState(() {
      _imageFile = file;
    });
  }

  void _handleError(dynamic exception) {
    print('Error: $exception');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imageFile != null
                ? Image.file(_imageFile!)
                : Text('No image selected.'),
            ElevatedButton(
              onPressed: () async {
                final ReceivePort receivePort = ReceivePort();
                RootIsolateToken isolateToken = RootIsolateToken.instance!;
                await Isolate.spawn(
                    pickimage, [isolateToken, receivePort.sendPort]);
                receivePort.listen((message) {
                  log('Received: $message');
                  setState(() {
                    _imageFile = File(message);
                  });
                });
              },
              child: const Text('Open Camera'),
            ),
          ],
        ),
      ),
    );
  }
}

 Future <void> pickimage(List args) async {
  BackgroundIsolateBinaryMessenger.ensureInitialized(args[0]);
  final ImagePicker imagePicker = ImagePicker();
  await imagePicker.pickImage(source: ImageSource.camera).then((value) {
    final SendPort sendPort = args[1];
    sendPort.send(value?.path);
  });
}

Conclusion: By leveraging Dart isolates, Flutter developers can implement efficient image picking functionality while maintaining a responsive user interface. Incorporating isolates into Flutter applications enhances performance and provides a seamless user experience, making it a valuable tool for handling background tasks like image selection.

References and Additional Resources:

Incorporate these strategies into your Flutter projects to optimize image picking performance and enhance the overall user experience. Happy coding!

Image picker using Dart Isolate

Written by Varmavetukuri