0

We are building out an application in which the user can build a 'form' using widgets in an InteractiveViewer. The goal is for the user to be able to print this form with things like textboxes, images, etc.. filled in. However, every attempt we have tried to get the widgets in the InteractiveViewer to look like it will look when printing, has failed. For example: Text boxes with text filled in print at a specific resolution and look pixelated, while on the InteractiveViewer they look perfectly fine. We believe this is due to Flutters use of logical pixels.

For example, the first image is what text looks like rendered on the InteractiveViewer, while the second image is when we convert the widget to image for printing.

image of text rendered in the InteractiveViewer (non pixelated)

image of text rendered in the InteractiveViewer (non pixelated)

image of widget converted to image for printing (pixelated)

image of widget converted to image for printing (pixelated)

We have tried to display widgets with MediaQuery as that has the ability to set pixel ratio, but this only sets the size of the widget, not at what resolution it is rendered.

Basically what we are needing is the ability for the user to see (preferably in the InteractiveViewer) if a widget is scaled too large or too small and what it would look like when printed off (blurry or not).

Edit: Adding code for converting widget to image

final boundary = imageKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
final image = await boundary?.toImage(pixelRatio: 1);
var bytes = await image?.toByteData(format: ImageByteFormat.png);
3
  • can you provide the code snippet or simple workaround you mentioned about "convert the widget to image"
    – Adan
    Commented Mar 1, 2024 at 3:42
  • Please provide enough code so others can better understand or reproduce the problem.
    – Community Bot
    Commented Mar 1, 2024 at 18:24
  • Hi @Adan, I added the snippet you requested.
    – Kristoff
    Commented Mar 5, 2024 at 5:21

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.