How to capture widget not showing on screen and bigger than screen

Question

I am trying to generate image from Widget i made, with width bigger than the screen, and i am using screenshot to do that. but the problem alway the generated image not exceed the screen width.

This is what i am expecting:

This is what i got

void _downloadAndroid()  {
    ScreenshotController()
        .captureFromWidget(
          SizedBox(
            width: 1600,
            height: 1200,
            child: getCustomWidget(),
        )
    ).then((capturedImage) async {
       // code that save the image to the local storage
    });
}

Answer 1

I think the code below will help you.

class SecondPage extends StatefulWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  final GlobalKey key = GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () async {
        // Save image in gallery.
        final RenderRepaintBoundary renderRepaintBoundary =
            key.currentContext!.findRenderObject() as RenderRepaintBoundary;
        ui.Image image = await renderRepaintBoundary.toImage(pixelRatio: 3);
        final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
        Uint8List data = byteData!.buffer.asUint8List();
        ImageGallerySaver.saveImage(data);
      },
      child: OverflowBox(
        // This can let RepaintBoundary's render area bigger than screen, take 2000 as example
        maxHeight: 2000,
        // This can let RepaintBoundary's render area bigger than screen, take 2000 as example
        maxWidth: 2000,
        alignment: Alignment.topLeft,
        child: RepaintBoundary(
          key: key,
          child: Container(
            color: Colors.red,
            child: Stack(
              children: [
                Positioned(
                    left: 100,
                    top: 100,
                    child: Container(
                      width: 500,
                      height: 500,
                      color: Colors.blue,
                    ))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Here is the image take from screen(System screen shot)(1170 X 2532):

And here is the image take from the code I wrote above(6000 x 6000).