Flutter Web RenderRepaintBoundary toimage does not render widgets with images

Question

RepaintBoundary(
      key: snapshotContainer,
      child: Image.network('https://picsum.photos/250?image=9'),
);

and

final RenderRepaintBoundary boundary =
                          snapshotContainer.currentContext!
                              .findRenderObject()! as RenderRepaintBoundary;
                          final ui.Image image =
                              await boundary.toImage(pixelRatio: 2);
                          final ByteData? byteData = await image.toByteData(
                              format: ui.ImageByteFormat.png);
                          final Uint8List pngBytes =
                          byteData!.buffer.asUint8List();

produces an empty image. is there a way how to render widgets with images inside via Flutter Web CanvasKit?

Answer 1

You need to run flutter in production run mode to see this working. We have been facing the same issue and it seems if you run it using this command

flutter run -d chrome --web-renderer canvaskit --release --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false

it should render your images.

Word of caution is that the BROWSER_IMAGE_DECODING_ENABLED=false is a workaround for an active issue in flutter