How to take a screenshot of the current widget - Flutter

Question

I need to take a screenshot of the current screen or widget and I need to write it into a file.

Answer 1

I tried and found the solution,

import 'package:flutter/material.dart'; import 'dart:async'; import 'dart:typed_data'; import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; import 'package:path_provider/path_provider.dart'; import 'dart:io';  void main() => runApp(new MyApp());  class MyApp extends StatelessWidget {   // This widget is the root of your application.   @override   Widget build(BuildContext context) {     return new MaterialApp(       title: 'Flutter Demo',       theme: new ThemeData(         primarySwatch: Colors.blue,       ),       home: new MyHomePage(title: 'Flutter Demo Home Page'),     );   } }  class MyHomePage extends StatefulWidget {   MyHomePage({Key key, this.title}) : super(key: key);   final String title;    @override   _MyHomePageState createState() => new _MyHomePageState(); }  class _MyHomePageState extends State<MyHomePage> {   static GlobalKey previewContainer = new GlobalKey();   int _counter = 0;    void _incrementCounter() {     setState(() {       // This call to setState tells the Flutter framework that something has       // changed in this State, which causes it to rerun the build method below       // so that the display can reflect the updated values. If we changed       // _counter without calling setState(), then the build method would not be       // called again, and so nothing would appear to happen.       _counter++;     });   }    @override   Widget build(BuildContext context) {      return RepaintBoundary(         key: previewContainer,       child: new Scaffold(       appBar: new AppBar(          title: new Text(widget.title),       ),       body: new Center(         child: new Column(            mainAxisAlignment: MainAxisAlignment.center,           children: <Widget>[             new Text(               'You have pushed the button this many times:',             ),             new Text(               '$_counter',               style: Theme.of(context).textTheme.display1,             ),             new RaisedButton(                 onPressed: takeScreenShot,               child: const Text('Take a Screenshot'),             ),           ],         ),       ),       floatingActionButton: new FloatingActionButton(         onPressed: _incrementCounter,         tooltip: 'Increment',         child: new Icon(Icons.add),       ), // This trailing comma makes auto-formatting nicer for build methods.     )     );   }   takeScreenShot() async{     RenderRepaintBoundary boundary = previewContainer.currentContext.findRenderObject();     ui.Image image = await boundary.toImage();     final directory = (await getApplicationDocumentsDirectory()).path;     ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);     Uint8List pngBytes = byteData.buffer.asUint8List();     print(pngBytes);     File imgFile =new File('$directory/screenshot.png');     imgFile.writeAsBytes(pngBytes);   } } 

Finally check your application directory You will find screenshot.png !!

Answer 2

let's say you want to take a screenshot of the FlutterLogo widget . wrap it in a RepaintBoundary with will creates a separate display list for its child . and provide with a key

var scr= new GlobalKey(); RepaintBoundary(          key: scr,          child: new FlutterLogo(size: 50.0,)) 

and then you can get the pngBytes by converting the boundary to an image

takescrshot() async {   RenderRepaintBoundary boundary = scr.currentContext.findRenderObject();   var image = await boundary.toImage();   var byteData = await image.toByteData(format: ImageByteFormat.png);   var pngBytes = byteData.buffer.asUint8List();   print(pngBytes);   }