Dart future blocking main thread

Question

I'm working on an app that captures and processes an image. A simplified version of the code is:

build() {
   return FloatingActionButton(
        onPressed: processImage,
        child: Icon(
          Icons.camera_alt,
          color: color,
        ),
      ); 
}

processImage(Camera image) async {
   await image.process();   
}

And in another class:

Future<image> process() {
  return Future(() {
    for (int x = 0; x < width; x++) {
      for (int y = 0; y < height; y++) {
        //process image
      }
    }
  });
}

But when process() is running, the UI freezes.

Why is this happening? Isn't that function passed to Future constructor running in the background?

Solution

As Dart uses an event loop, all code (synchronous and asynchronous) will simply be run on the same isolate (think thread in other languages as an analogy), just at different points in time. As such, when your process method is dequeued and executed, it will block the thread and cause frames to be dropped due to a longer execution time, despite being asynchronous. The optimal solution to the problem is to spawn another isolate in a new thread, and carry out the computation there. Flutter provides a convenience method for this exact use case, called compute. It takes a top-level function (not in a class, nor anonymous) that can have a primitive type parameter (including Map and List) as an argument and will return at some point in the future. For more information on compute, see its documentation linked above.

If you have multiple parameters that you need to pass to compute, a common pattern (outside of just this use case) is making a method that serializes a class' fields to a Map<String, dynamic>, and a factory constructor that creates an object from a Map<String, dynamic>. This process would be easier with reflection, but Flutter disables it due to performance reasons.

For a full example on compute from the Flutter documentation, see here: https://flutter.dev/docs/cookbook/networking/background-parsing

Comments

[Timo Bähr]

Wrong answer, this will not help. UI still freezes.