Flutter: How to take Screenshot of the screen or widget and save as image

Introduction:

In this post, we will discuss how to take a screenshot of the widget and save it as an image. Let’s take a use case where we need this functionality.

Here is an app to read quotes in a beautiful background.

quote app

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {
  List<Quote> _quotes = [
    Quote(
        content: "Friendship is Love without his wings!",
        author: "Lord Byron",
        image: 'quote-1.jpeg')
  ];
  String _currentImage = 'assets/img/image1.jpeg';
  initState() {
    super.initState();
  }@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/img/placeholder.jpeg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        PageView.builder(
          scrollDirection: Axis.vertical,
          itemCount: _quotes.length,
          itemBuilder: (context, position) {
            return Container(
              width: double.infinity,
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: new EdgeInsets.all(25.0),
                          child: Text(
                            _quotes[position].content,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 24.0,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                        Padding(
                          padding: new EdgeInsets.all(25.0),
                          child: Text(
                            '- ' + _quotes[position].author,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.0,
                                fontWeight: FontWeight.bold,
                                fontStyle: FontStyle.italic),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ],
    ));
  }
}

Users might want to share it with friends and family. So adding a download button there will download the screenshot of the screen and save it into the user's mobile.

Let’s add a save/download button.

So we have added a button that should take the screenshot and save it as an image.

Code for adding the download button.

Positioned(
          right: 15.0,
          bottom: 12.0,
          child: InkWell(
            onTap: () {
              download();
            },
            child: Icon(Icons.download_sharp, color:Colors.white70),
          ),
),

On click on the download button onTap function will call the download function.

Prepare and Download the Image:

We will use RepaintBoundary Flutter class to achieve this.

Wrap the widgets you want to take screenshot of inside RepaintBoundary(..)

RepaintBoundary needs to be specified with Global key so lets set that.

static GlobalKey _globalKey = GlobalKey();

Finally, now we need to covert the RepaintBoundary widget to an image. Remember the download function that we defined on download button click.

Lets add magic in that function.

Future<Null> download() async {
    RenderRepaintBoundary boundary =
        _globalKey.currentContext.findRenderObject();ui.Image image = await boundary.toImage();
    final directory = (await getExternalStorageDirectory()).path;ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();final now = new DateTime.now();File imgFile = new File('$directory/Sher_$now.png');
    imgFile.writeAsBytes(pngBytes);Toast.show('Saved to $directory', context,
        duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
  }
}

This function will convert the widget to image and will store the byte data as image in device storage.

Thanks for reading. If you have some feedback, please reach out to me on Twitter or Github.