CODEWITHSUNDEEP
flutterpngrenderflutter-websnapshot
smedasn
smedasn

Reputation: 1409

Flutter Web RenderRepaintBoundary toimage does not render widgets with images

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?

Upvotes: 3

Views: 1936

Answers (2)

tstark7
tstark7

Reputation: 71

What worked for me is to use svg instead of png images, e.g.

import 'package:flutter_svg/svg.dart'; 

SvgPicture.asset(AppImages.mapPin, height: 20)

This works for Web without any other command line arguments or any other changes.

Upvotes: 0

Utsavkumar Lal
Utsavkumar Lal

Reputation: 139

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

Upvotes: 4

Related Questions