RenderRepaintBoundary to image without adding Widget to screen

Question

I'm trying to export an image from a Widget without adding this Widget to screen.

Is this even possible?

I already succeeded in exporting it by adding to a scrollable container, now I want to render it without adding it to screen and save it to a temp file for sharing.

I think there should be a "paint" call somewhere in there but can't figure out exactly where.

Here's my code:

var shareImage = await ShareImageWidget.builder(context,
item: item, definition: definition);
var widget = shareImage.build(context);
var repaint = RepaintBoundary.wrap(widget, 0);
var render = RenderRepaintBoundary(child:repaint.createRenderObject(context));
ui.Image image = await render.toImage(pixelRatio: 1.0);
ByteData byteData = await image.toByteData(format:ui.ImageByteFormat.png);
var pngBytes = byteData.buffer.asUint8List();
var bs64 = base64Encode(pngBytes);
var dir = await getTemporaryDirectory();

https://docs.flutter.io/flutter/widgets/Offstage-class.html might work for that — Günter Zöchbauer, Mar 13 '19 at 06:48
unfortunately when you use that it throws the same error as if you had the widget there with opacity 0. " flutter: 'package:flutter/src/rendering/proxy_box.dart': Failed assertion: line 2882 pos 12: '!debugNeedsPaint': is not true. " — tapizquent, Sep 08 '19 at 20:44
did you find a solution to paint a widget without showing it? — Luca Faggianelli, Nov 22 '19 at 12:17
Hey Luca, I didn't. Ended up covering the widget with another one. — markezine, Nov 23 '19 at 13:45

score 6 · Answer 1 · answered Jul 09 '21 at 14:28

Exemple:

/// Creates an image from the given widget by first spinning up a element and render tree,
/// then waiting for the given [wait] amount of time and then creating an image via a [RepaintBoundary].
/// 
/// The final image will be of size [imageSize] and the the widget will be layout, ... with the given [logicalSize].
Future<Uint8List> createImageFromWidget(Widget widget, {Duration wait, Size logicalSize, Size imageSize}) async {
  final RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();

  logicalSize ??= ui.window.physicalSize / ui.window.devicePixelRatio;
  imageSize ??= ui.window.physicalSize;

  assert(logicalSize.aspectRatio == imageSize.aspectRatio);

  final RenderView renderView = RenderView(
    window: null,
    child: RenderPositionedBox(alignment: Alignment.center, child: repaintBoundary),
    configuration: ViewConfiguration(
      size: logicalSize,
      devicePixelRatio: 1.0,
    ),
  );

  final PipelineOwner pipelineOwner = PipelineOwner();
  final BuildOwner buildOwner = BuildOwner();

  pipelineOwner.rootNode = renderView;
  renderView.prepareInitialFrame();

  final RenderObjectToWidgetElement<RenderBox> rootElement = RenderObjectToWidgetAdapter<RenderBox>(
    container: repaintBoundary,
    child: widget,
  ).attachToRenderTree(buildOwner);

  buildOwner.buildScope(rootElement);

  if (wait != null) {
    await Future.delayed(wait);
  }

  buildOwner.buildScope(rootElement);
  buildOwner.finalizeTree();

  pipelineOwner.flushLayout();
  pipelineOwner.flushCompositingBits();
  pipelineOwner.flushPaint();

  final ui.Image image = await repaintBoundary.toImage(pixelRatio: imageSize.width / logicalSize.width);
  final ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);

  return byteData.buffer.asUint8List();
}

Reference: https://github.com/flutter/flutter/issues/40064#issuecomment-620081426

There is a package with this feature: https://pub.dev/packages/screenshot#capturing-widgets-that-are-not-in-the-widget-tree

score 0 · Answer 2 · answered Oct 17 '20 at 18:19

0

You can use the Transform.translate Widget to move the widget offscreen. Transform moves the widget before painting it.

answered Oct 17 '20 at 18:19

Code on the Rocks

11,488
3
53
61

score 0 · Answer 3 · answered Apr 08 '21 at 06:55

I am using the function from here:

How to create an image from a widget in Flutter-web?

this feature allows you to translate widgets into images without worrying about hiding those widgets from the screen. More recently, this has been working on the web as well.

RenderRepaintBoundary to image without adding Widget to screen

3 Answers3

Linked