title: Flutter UI is still freezing when using isolate
body: <p>I am developing an application in Flutter where I need to implement an image selection function like in instagram.
  But there is an issue, my app UI is freezing when trying to get and compress files from user phone gallery.</p>
  <p>This is my first experience with flutter isolates, but as far as i know it should work without freezes.</p>
  <p><a href="https://i.stack.imgur.com/rXPz1.png" rel="nofollow noreferrer">Here is an image for a better understanding of what i want to do.</a></p>
  <p>This is a function that calls getFiles function in isolation.
  Here i get paths of user phone gallery files and pass them to another function in order to compress and get files for rendering.</p>
  <pre><code>Future fetchImages({ bool fetchMore = false, bool force = false }) async {
      if (!fetchMore) {
        setState(() =&gt; fetched = false);
      }
      if (force) {
        assetsCount = await assetPathEntity!.assetCountAsync;
        page = 0;
  
        files.clear();
      }
      if (assetsCount == 0 || page &gt;= (assetsCount / pageSize)) {
        return setState(() =&gt; fetched = true);
      }
      final assetEntities = await assetPathEntity!.getAssetListPaged(page: page++, size: pageSize);
      lastCompletedIndex = files.length;
  
      final receivePort = ReceivePort();
      final completer = Completer();
  
      getFiles(receivePort.sendPort, assetEntities);
  
      try {
        receivePort.listen((filesPaths) {
          for (final filePath in filesPaths) {
            files.add({
              &quot;path&quot;: filePath,
              &quot;compressedFile&quot;: null,
            });
          }
  
          if (scaledFile == null &amp;&amp; files.isNotEmpty) {
            scaledFile = File(files.first[&quot;path&quot;]);
          }
          compressAlbumImages();
          completer.complete();
          setState(() =&gt; fetched = true);
        }).onError((_) {
          compressAlbumImages();
          completer.complete();
          setState(() =&gt; fetched = true);
        });
  
        await Future.wait([completer.future]);
      } catch (_) { }
      finally {
        receivePort.close();
      }
    }
  </code></pre>
  <p>This is getFiles function that runs in isolation</p>
  <pre><code>void getFiles(SendPort sendPort, List&lt;AssetEntity&gt; assetEntities) async {
    final List&lt;String&gt; filesPaths = [];
  
    for (final assetEntity in assetEntities) {
      try {
        final file = await assetEntity.file;
  
        if (file != null) {
          filesPaths.add(file.path);
        }
      } catch (_) { }
    }
    sendPort.send(filesPaths);
  }
  </code></pre>
  <p>This is a function that calls compressImages function and adds any value to refresh the list of images
  Here i pass the paths and get compressed files for rendering.</p>
  <pre><code>void compressAlbumImages() async {
      final receivePort = ReceivePort();
      final completer = Completer();
  
      compressImages(receivePort.sendPort, files, lastCompletedIndex);
  
      try {
        receivePort.listen((compressedFilesWithPath) {
          files = compressedFilesWithPath;
          fileStreamCt.sink.add(1);
          completer.complete();
        }).onError((_) {
          completer.complete();
        });
        await Future.wait([completer.future]);
      } catch (_) {}
      finally {
        receivePort.close();
      }
      return;
    }
  </code></pre>
  <p>This is an image compression function that runs in isolation</p>
  <pre><code>void compressImages(SendPort sendPort, List&lt;Map&lt;String, dynamic&gt;&gt; files, int startFromIndex) async {
    final List&lt;String&gt; filesToBeRemoved = [];
  
    for (int idx = startFromIndex; idx &lt; files.length; idx++) {
      final file = files[idx];
  
      try {
        final compressedFile = await FlutterNativeImage.compressImage(
          file[&quot;path&quot;],
          quality: 20,
          percentage: 20,
          targetHeight: 300,
          targetWidth: 300,
        );
  
        file[&quot;compressedFile&quot;] = compressedFile;
      } catch (_) {
        filesToBeRemoved.add(file[&quot;path&quot;]);
      }
    }
  
    if (filesToBeRemoved.isEmpty) {
      return sendPort.send(files);
    }
    final compressedFilesWithPaths = files
        .whereNot((element) =&gt; filesToBeRemoved.contains(element[&quot;path&quot;]))
        .toList();
  
    sendPort.send(compressedFilesWithPaths);
  }
  </code></pre>
  <p>And finally i render compressed images</p>
  <pre><code>return StreamBuilder(
    stream: fileStreamCt.stream,
    builder: (ctx, AsyncSnapshot&lt;int&gt; snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Text(&quot;LOADING...&quot;);
      }
      if (snapshot.hasError) {
        return Text(&quot;AN ERROR OCCURRED&quot;);
      }
      return buildAlbumImages();
    }
  );
  </code></pre>
  <p>Render like this</p>
  <pre><code>Image.file(compressedImage);
  </code></pre>
  <p>If in short - When i'm getting user phone gallery files &amp;&amp; compress them, my app UI starts freezing.
  I don't know why it's freezing.</p>
  <p>I tried the same process but with file.readAsBytes() and to render like Image.memory(compressedFileBytes), but it was useless.</p>
  <p>I would be very grateful for any help.
  Thanks in advance.</p>