DEV Community

James Cardona
James Cardona

Posted on • Originally published at Medium on

Decoding Isolates: Basic to advanced concepts - Part3

#flutter #flutterexamples #isolates

DEMO

Thank you for being here in the last part of this series.
Surely if you got this far you are like this:

I'll explain the problem and add any specific comments as needed, This use case are things that I wrote in the past to solve a problem in real apps.
1- Image processing
Create a solution to compress an image; move it to the internal folder of the device and show the compressed image.

Solution:

  • Use a compute/Isolate.run because is a single operation
  • Pick an image from the UI (MainIsolate) and send the image path to the Isolate
  • Use a compress algorithm
  • Move the isolate to the internal folder
  • Return the new Path to the Main Isolate

From Dart 3.7 you can use background Isolates; this is a subject that I don't cover here but you can check more information here. P1.
The operation of obtaining the internal directory of the application is an operation that requires us to use BackgroundIsolates to be able to use plugins that are not written in Dart.
If you don't want to use BackgroundIsolates you can send the internal folder as a param.
Trigger event:

var rootToken = RootIsolateToken.instance!;
// get the file location
newPath = await Isolate.run(
  () => ImageProcessingIsolate.compressImage(
      FileInfo(
        maxSize: 1 * 1024 * 1024, // <<1MB
        fileLocation: originalPath!,
      ),
      token: rootToken,
    ),
  );
Enter fullscreen mode Exit fullscreen mode

Isolate:

 

static Future<String?> compressImage(FileInfo info, {RootIsolateToken? token}) async {
    if (token != null) {
      BackgroundIsolateBinaryMessenger.ensureInitialized(token);
    }

    final helper = CompressImageService(info);

    final fileBytes = await _loadBytes(info.fileLocation);
    final newFileBytes = await helper.executeCompression(fileBytes);
    final internalFolder = await _getInternalFolder();

    return MoveFiles.saveInAppSystem(newFileBytes, internalFolder);
}
Enter fullscreen mode Exit fullscreen mode

For isolate to work it is not necessary to know what the compression and file-moving functions do, but you can explore the solutions in the repository.

2- Upload images to the server.
Upload the images to the server as a String in Base64; you can pick the images and go to another screen; the upload will be kept in the background and all screens need to listen to the updates.
Maybe this approach is not the best way, but in one application that I wrote in the past, this was the way provided from the backend.

  • Solution:

  • Use a Spawn Isolate to send images to Isolates

  • Starts uploading images as you select images

  • Inform when the upload Start

  • Inform when the Image completes the Upload

  • Change the Image state - Uploading/ Completed

  • Show progress in the UI (How many images are left?)

  • Use a provider to listen and send messages to the isolate.

The messages for the entrypoint:
sealed class IsolateMessage {}

class IsolateMessageData extends IsolateMessage {
  final List<AttachmentInfo> data;

  IsolateMessageData(this.data);
}

class IsolateMessageClose extends IsolateMessage {}
Enter fullscreen mode Exit fullscreen mode

Provider; the provider is used to share the IsolateController instance between different screens.

class UploadImageProvider extends ChangeNotifier {
  final Map<String, AttachmentInfo> _attachments = {};
  IsolateControllerForUpload<IsolateMessage, AttachmentInfo>? _isolateController;
  StreamSubscription? _subscription;

  void init() async {
    _isolateController = await IsolateControllerForUpload.create();
    _subscription = _isolateController?.broadcastRp.listen((attachment) {
      _attachments[attachment.id] = attachment;
      notifyListeners();
    });
  }

  void addAttachments(List<AttachmentInfo> attachments) {
    for (final attachment in attachments) {
      _attachments[attachment.id] = attachment;
    }
    _isolateController?.send(IsolateMessageData(attachments));

    notifyListeners();
  }

  List<AttachmentInfo> get attachments => _attachments.values.toList();

  int get completedCount => _attachments.values.where((element) => element.state == AttachmentInfoState.completed).length;
  int get totalCount => _attachments.length;

  @override
  void dispose() {
    super.dispose();
    _subscription?.cancel();
    _isolateController?.dispose();
  }
}
Enter fullscreen mode Exit fullscreen mode

The only difference between this IsolateControllerForUpload and the controller from the second post is the entrypoint and the In/Out models; other parts remain as in the previous implementation.

Entrypoint
When the message has a list of attachments; In this demo, we are going to process them as if they were messages with a single attachment; For that, I am going to use SwitchMap to convert the list of attachments into a list of messages with a single attachment

final messages = rp.takeWhile((element) => element is IsolateMessage)
  .cast<IsolateMessage>()
  .switchMap(
    (message) {
      if (message is IsolateMessageData) {
        return Stream.fromIterable(message.data).map((event) => IsolateMessageData([event]));
      } else {
        return Stream.value(message);
      }
    },
);
Enter fullscreen mode Exit fullscreen mode 
final base64Converter = ConvertImageToBase64();
final mockUploadImage = MockUploadImage();

await for (final message in messages) {
  switch (message) {
    case IsolateMessageData _:
      // Early the original list of messages; was converted into multiple messages with a single item per list.
      // This help me to achieve a better control of the state of each item.
      // You can use another approach to achieve the same result.
      final data = message.data.first;
      sendPort.send(data.updateState(AttachmentInfoState.uploading));
      final base64 = await base64Converter.convert(data.fileLocation);

      mockUploadImage.uploadImage(base64).then((value) {
        print('Uploaded');
        sendPort.send(data.updateState(AttachmentInfoState.completed));
      }).catchError((error) {
        sendPort.send(data.updateState(AttachmentInfoState.failed));
      });
      break;
    case IsolateMessageClose _:
      Isolate.exit(sendPort, 'closed');
  }
}
Enter fullscreen mode Exit fullscreen mode

A possible improvement for this code is to set a limit at the same time the uploadImage method is called so as not to overwhelm the server using a queue or a similar solution.
Now in the UI, you can use the provider to show on every screen the totalCount and the completedCount

Padding(
    padding: const EdgeInsets.symmetric(vertical: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Images: ${_provider.totalCount}'),
        const SizedBox(width: 20),
        Text('Completed ${_provider.completedCount}'),
      ],
    ),
  ),
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this far. Consider giving it a like, sharing it, and staying tuned for future articles. Feel free to contact me via LinkedIn.

References

Top comments (0)

Read next

paschalogu profile image

What developers really want

Paschal Ogu -

sergeytolkachyov profile image

Preparing extensions for Joomla 6. CMSObject -> stdClass.

Sergey Tolkachyov -

atharvgyan profile image

JavaScript interview questions & answers with code

Atharv Gyan -

lovestaco profile image

Why Global Standards of API Design Save Your Team Time

Athreya aka Maneshwar -