Fix UI hang when parsing large Uri on Flutter Web (without compute function)

In Flutter Web, if you are parsing a large base64 encoded data URL using Uri.parse, and this is causing the UI to hang, this likely means that the operation is heavy and taking too long on the main thread. While the compute function is generally a good solution to offload expensive computation to a separate isolate, it’s not available on Flutter Web because Web does not support isolates in the same way as Flutter for mobile or desktop platforms.

To avoid blocking the main thread, you can use a Future to ensure the parsing operation is performed asynchronously. Unfortunately, Uri.parse itself is synchronous and cannot be made asynchronous. But you can mimic the behavior by delaying the execution using Future.delayed. Though this won’t make the operation faster, it will allow the UI thread to breathe.

Here’s an example of how you might do this using Future:

Future<Uri> _encodeDataUrl(String base64Data, String mimeType) async {
  return Future<Uri>.delayed(Duration.zero, () {
    return Uri.parse('data:$mimeType;base64,$base64Data');
  });
}

Using this async function, you can then call it with await in your widget and use a FutureBuilder to show a loading indicator until the parsing is complete. Here’s an example:

FutureBuilder<Uri>(
  future: _encodeDataUrl(myBase64Data, myMimeType),
  builder: (BuildContext context, AsyncSnapshot<Uri> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // or some other loading indicator
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return YourWidgetUsingTheUri(snapshot.data); // Replace this with the widget that uses the Uri
    }
  },
)

However, please note that this doesn’t actually make the operation itself faster or more efficient – it simply ensures that the UI remains responsive during the operation.