Screenshot elements not rendered on screen?

[vedantrathore]

Hello @SachinGanesh thanks for the package. I'm trying to screenshot a part of the widget tree but I need to add some custom widgets to the screenshot, those widgets in the screenshot should not be shown on the screen. Is there a way to achieve this using this package?

[vedantrathore]

Any update ?

[Sammius]

It would be very helpful for me too!

[bdlukaa]

It's not possible because this package uses a RepaintBoundary under the hood, so that means it can only take screenshot of the widgets that are rendered. What you can do is add the widgets to the screen, take a screenshot, and then remove them:

setState(() => widgetsVisible = true);
await takeScreenshot();
setState(() => widgetsVisible = false);

You can use something like overlay or dialog to hide the screen while the screenshot is happening!

[Sammius]

I am currently using the functions from here. It also uses RepaintBoundary, but no real repaints are required. Maybe something similar can be applied here.

[ritheshSalyan]

Currently Screenshot support capturing of non rendered elements. You can make use of captureFromWidget function like shown below

  screenshotController
                    .captureFromWidget(Container(
                        padding: const EdgeInsets.all(30.0),
                        decoration: BoxDecoration(
                          border:
                              Border.all(color: Colors.blueAccent, width: 5.0),
                          color: Colors.redAccent,
                        ),
                        child: Text("This is an invisible widget")))
                    .then((capturedImage) {
                  ShowCapturedWidget(context, capturedImage);
                });

[daybson]

Currently Screenshot support capturing of non rendered elements. You can make use of captureFromWidget function like shown below

  screenshotController
                    .captureFromWidget(Container(
                        padding: const EdgeInsets.all(30.0),
                        decoration: BoxDecoration(
                          border:
                              Border.all(color: Colors.blueAccent, width: 5.0),
                          color: Colors.redAccent,
                        ),
                        child: Text("This is an invisible widget")))
                    .then((capturedImage) {
                  ShowCapturedWidget(context, capturedImage);
                });

How do I trigger the captureFromWidget from a method, if the wifget to be captured is the Scaffold? There's my Listview with some elements outside view, and I want them on the screen shot too.

@override
  Widget build(BuildContext context) {
    b = build2(context);
    return b;
  }

void printScreen() async {
    screenshotController
        .captureFromWidget(Container(
            padding: const EdgeInsets.all(30.0),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blueAccent, width: 5.0),
              color: Colors.redAccent,
            ),
            child: b))
        .then((image) async {
      final directory = (await getTemporaryDirectory()).path;
      File imgFile =
          new File('$directory/${controller.ficha.value.nome}_screenshot.png');
      await imgFile.writeAsBytes(image);
      Share.shareFiles(['${imgFile.path}'],
          text: 'Personagem ${controller.ficha.value.nome}');
    });
}