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);

  State<Errorgram> createState() => _ErrorgramState();

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

  void initState() {

  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,

                child: Center(
                  child: Column(
                    children: [
                        visible: isVisible,
                        child: ElevatedButton(
                          child: Text("Tap on this"),
                          style: ElevatedButton.styleFrom(
                            elevation: 0,
                          onPressed: () {
                            setState(() {
                              isVisible = false;


  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');

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


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.