3

how can I export the screen as an image or PDF in Flutter in high resolution? Is it possible to export the container with background image and textfield with user input as image? I tried this solution (How to take a screenshot of the current widget - Flutter), but the resolution is to bad. I need the screen in different size e.g. 40x60cm, 20x30cm and 300Ddpi.

Max
  • 107
  • 11
  • What you want to do is not simple... The method you linked "take" the rendered widget and "put" it in a variable. You can't take a widget and export with a bigger size – Gioele Pannetto Feb 16 '21 at 21:09
  • Hi, thanks for reply. Is there any other way to export the widget as image? I read flutter is supporting .svg files, so maybe when I add .svg files instead of jpg files? – Max Feb 17 '21 at 13:04
  • It should return a png, not a jpg. And btw no, as much I know, you can't export as svg – Gioele Pannetto Feb 21 '21 at 17:07

2 Answers2

4

Have you tried to use pixelRatio?

ui.Image image = await boundary.toImage(pixelRatio: 10);
Thierry
  • 7,775
  • 2
  • 15
  • 33
0

Tried out pixelRatio and combined it with larger resp. no cacheWidth - it works indeed, at least for PNG export.

Be aware however, that a pixelRatio of 10 takes quite some time to capture...

Code Snippet for image:

child: ClipRRect(
  borderRadius: BorderRadius.circular(15),
  child: Image.file(
    File(widget.myGroup.picture),
    width: MediaQuery.of(context).size.width,
    // NO cacheWidth:
    // cacheWidth: MediaQuery.of(context).size.width,
    fit: BoxFit.fitWidth,
  ),
),

Code Snippet for _capturePng():

Future<Uint8List> _capturePng() async {
  RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();

  if (boundary.debugNeedsPaint) {
    print("Waiting for boundary to be painted.");
    await Future.delayed(const Duration(milliseconds: 20));
    return _capturePng();
  }

  var image = await boundary.toImage(pixelRatio: 10);
  var byteData = await image.toByteData(format: ImageByteFormat.png);
  return byteData.buffer.asUint8List();
}

(Referring to this question here about screenshot with flutter on Stack Overflow)

t-pi
  • 1
  • 1