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 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);