Using `Image.asset` with `renderFlutterWidget` doesn't render Image

[dario-digregorio]

Hi Anton,
first of all thank you really much for your package :)

I am using HomeWidget.renderFlutterWidget to render an image of my Widget which uses Image.asset. For some reason the images are created but they are empty (148B) and some are rendered normally (7,2kB).

The Images in the Flutter assets exist and I don't get any exceptions. When I am using another Widget than Image.asset the Images are being rendered and stored correctly. It seems to me that RenderView has a problem with Image.asset Widget.

[ABausG]

Hey Dario!
Glad you found your way here.

So in principle displaying Images using Image.asset should work. I have recently found a similar behaviour in the example I did for Lockscreen Widgets.
Where I observed that when I first call renderFlutterWidget it might not render the Image.asset to the Image. However successive calls to renderFlutterWidget would then render it correctly.
My assumption for this is thus that the Image is not loaded fully when the RenderView captures the canvas.
Could you try if you still encounter this behaviour when you use precacheImage on your Images? https://api.flutter.dev/flutter/widgets/precacheImage.html
If it is indeed the timing issue I suspect this should fix this. Let me know if this works

[dario-digregorio]

I still encounter the same issue when using precacheImage. But using renderFlutterWidget successive seems to work.

[ABausG]

Hmmm, could you try if try something like the following to make sure the precached ImageProvider is the one used for the widget?

final imgProvider = AssetImage('name');
await precacheImage(imgProvider);
HomeWidget.renderFlutterWidget(Image(image: imgProvider));

Reading a bit through the documentation from Image.asset it might be that there is some scaling going on when just using Image.asset

[dario-digregorio]

Did not work either. Just the hack of calling renderFlutterWidget twice seems to work.

[wxkly8888]

Hmmm, could you try if try something like the following to make sure the precached ImageProvider is the one used for the widget?

final imgProvider = AssetImage('name');
await precacheImage(imgProvider);
HomeWidget.renderFlutterWidget(Image(image: imgProvider));

Reading a bit through the documentation from Image.asset it might be that there is some scaling going on when just using Image.asset

This solves my problem

[ABausG]

I think another way could be to add a bit of delay in the capture process. This is for example how the screenshot package handles this. I will provide an option to define this in renderFlutterWidget

[ueman]

This problem arises due to the image loading being async. So the correct solution would be to do the equivalent of tester.pumpAndSettle() from widget tests in the renderFlutterWidget() method. Probably calling something like renderFrame multiple times.

[ABausG]

@dario-digregorio in case you are using just the Image.asset:

Once #409 is merged/released you can use: HomeWidget.saveImage(AssetImage(asset)) to directly store the asset in shared storage with the widget without having to go through renderFlutterWidget