flutter - How to take screenshot for Image widget by using RepaintBoundary?

Question

Need to take screenshot for a specific area. Tried RepaintBoundary and GlobalKey. Widgets like Text and Container work fine but Image doesn't. The Image area in screenshot picture is blank(white or black).

Tried How to take a screenshot of the current widget - Flutter but no luck.

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(() {
      _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'),
                ),
                Container(
                  height: 150.0,
                  child: Image(
                    image: AssetImage('assets/images/bg2.jpeg'),
                  ),
                ),
                new Stack(
                  children: <Widget>[
                    new Text('stack 1'),
                    new Text('stack  2'),
                    new Text('stack   3'),
                  ],
                ),
              ],
            ),
          ),
          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 getExternalStorageDirectory()).path;
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    print(pngBytes);
    File imgFile = new File('$directory/$_counter-screenshot.png');
    print(imgFile);
    imgFile.writeAsBytes(pngBytes);
  }
}

Looks like https://github.com/flutter/flutter/issues/17687#issuecomment-429671022 — Günter Zöchbauer, Oct 15 '18 at 07:21

score 0 · Answer 1 · edited Aug 18 '20 at 16:24

Future<void> _takeScreenShot(context) async {
    RenderRepaintBoundary boundary = _repaintKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    final path = join(
      (await getTemporaryDirectory()).path, "screenshot${DateTime.now().toIso8601String()}.png");
    File imgFile = File(path);
    imgFile.writeAsBytes(pngBytes).then((value) {
      Navigator.of(context).pushNamed(Routes.uploadImage, arguments: value.uri.path);
    }).catchError((onError) {
      print(onError);
    });
}

Please provide a description for your code, So others can understand it too. — Farbod Ahmadian, Aug 18 '20 at 11:21

score 0 · Answer 2 · answered Aug 18 '20 at 06:53

You can try this!

   RenderRepaintBoundary boundary =
      mainRepaintKey.currentContext.findRenderObject();
  ui.Image image = await boundary.toImage(pixelRatio: 0.8);
  ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  File origFile = File(
      "${(await FileUtils.getDirectoryPath()).path}/${Id}_$name.png")
    ..writeAsBytesSync(byteData.buffer.asUint8List());

  File compressedFile = await FlutterImageCompress.compressAndGetFile(
      origFile.path, origFile.path,
      quality: 10, format: CompressFormat.png);

  Uint8List pngBytes = compressedFile.readAsBytesSync();

score 0 · Answer 3 · answered Apr 12 '21 at 16:42

0

Try to use a background color. When the image is transparent in color, you may not be able to see it correctly in some applications.

What I did was wrap the target screenshot in a container with color: Colors.white.

answered Apr 12 '21 at 16:42

David L

1,134
7
35

flutter - How to take screenshot for Image widget by using RepaintBoundary?

3 Answers3