How to take screenshot of widget beyond the screen in flutter?

Question

I am using RepaintBoundary to take the screenshot of the current widget which is a listView. But it only captures the content which is visible on the screen at the time.

RepaintBoundary(
                key: src,
                child: ListView(padding: EdgeInsets.only(left: 10.0),
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    Align(
                        alignment: Alignment(-0.8, -0.2),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: listLabel(orientation),
                        )
                    ),

                    Padding(padding: EdgeInsets.all(5.0)),

                    Align(
                        alignment: FractionalOffset(0.3, 0.5),
                        child: Container(
                            height: orientation == Orientation.portrait? 430.0: 430.0*0.7,
                            decoration: BoxDecoration(
                                border: Border(left: BorderSide(color: Colors.black))
                            ),
                            //width: 300.0,
                            child:
                            Wrap(
                              direction: Axis.vertical,
                              //runSpacing: 10.0,
                              children: colWidget(orientation),
                            )
                        )
                    ),
                    Padding(padding: EdgeInsets.all(5.0)),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: listLabel(orientation),
                    )
                  ],
                ),
              );

screenshot function:

Future screenshot() async {
    RenderRepaintBoundary boundary = src.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    print(pngBytes);
    final directory = (await getExternalStorageDirectory()).path;
File imgFile =new File('$directory/layout2.pdf');
imgFile.writeAsBytes(pngBytes);
  }

Is there any way, so that I can capture the whole listView, i.e., not only the content which is not visible on the screen but the scrollable content also. Or maybe if the whole widget is too large to fit in a picture, it can be captured in multiple images.

Answer 1

I achieve the solution of this problem using this package: Screenshot, that takes a screenshot of the entire widget. It's easy and simple, follow the steps on the PubDev or GitHub and you can make it work.

OBS: To take a full screenshot of the widget make sure that your widget is fully scrollable, and not just a part of it.

(In my case, i had a ListView inside a Container, and the package doesn't take the screenshot of all ListView because i have many itens on it, SO i have wrap my Container inside a SingleChildScrollView and add the NeverScrollableScrollPhysics physics in the ListView and it works! :D). Screenshot of my screen

More details in this issue