How to Take a Image/Screenshot of the current Widget in Flutter - (2023)

In app development sometimes we need to take image of the widget tree or widget programmatically so in this post we will learn How to take an Image/screenshot of the current widget in a flutter.

How to take an image of the current Widget :

While we need to take an image of any widget we need to help of RepaintBoundary. You can see the below example so you can get an idea.

Full Code:

import 'dart:io';
import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:share_plus/share_plus.dart';

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

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  final GlobalKey globalKey = GlobalKey();
  bool isVisible = true;

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        bottom: false,
        child: Scaffold(
            appBar: AppBar(
              title: Text("Errorgram"),
            ),
            body: RepaintBoundary(
              key: globalKey,
              child: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                  image: AssetImage("assets/images/ic_drawer_back_dark.png"),
                  fit: BoxFit.cover,
                )),

                //ic_drawer_back_dark
                child: Center(
                  child: Column(
                    children: [
                      Text("Errorgram"),
                      Spacer(),
                      Visibility(
                        visible: isVisible,
                        child: ElevatedButton(
                          child: Text("Tap on this"),
                          style: ElevatedButton.styleFrom(
                            primary: Colors.red,
                            elevation: 0,
                          ),
                          onPressed: () {
                            setState(() {
                              isVisible = false;
                            });

                            _captureSocialPng();
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            )));
  }

  saveImage() {
    var dir, path, fileName = "test.png";
    dir = Directory('/storage/emulated/0/Download');
    path = dir.path + "/" + fileName;
  }

  Future<void> _captureSocialPng() {
    List<String> imagePaths = [];
    final RenderBox box = context.findRenderObject() as RenderBox;
    return Future.delayed(const Duration(milliseconds: 20), () async {
      RenderRepaintBoundary? boundary = globalKey.currentContext!
          .findRenderObject() as RenderRepaintBoundary?;
      ui.Image image = await boundary!.toImage(pixelRatio: 3.0);
      final directory = Directory('/storage/emulated/0/Download');
      ;
      ByteData? byteData =
          await image.toByteData(format: ui.ImageByteFormat.png);
      Uint8List pngBytes = byteData!.buffer.asUint8List();
      File imgFile = File('${directory.path}/screenshot.png');
      imagePaths.add(imgFile.path);

      setState(() {
        isVisible = true;
      });
      imgFile.writeAsBytes(pngBytes).then((value) async {
        await Share.shareFiles(imagePaths,
            subject: 'Image share',
            text: 'Share',
            sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
      }).catchError((onError) {
        print(onError);
      });
    });
  }
}


 Conclusion:

In this article, we learned How to Take an Image/Screenshot of the current Widget in Flutter. We also saw how to store screenshots in storageI hope this article may help you.

Tags: