In my last blog, I explained the basic use of Sentry. After that, I mentioned the extended use of Sentry, including uploading screenshots while reporting exceptions.

Screenshots are difficult to capture in iOS or Android because the permissions involved are impossible to bypass. However, you can capture screenshots by drawing. In consideration of code consistency, this will reduce the development of iOS and Android, so SCREENshots are selected in Flutter.

You are advised to upload images in either of the following ways: 1. Upload images to the OSS cloud server through an interface. However, many exceptions may occur, causing the server to store a large number of useless images. 2. Upload the image base64 encoded string to the Sentry server in the way provided by Sentry, and then use the tool to decode the encoded string to get the image. The disadvantage is that if the image is too large, the Base64 encoded string will be very long, and the string will be intercepted if there are upload restrictions. Will result in decoding the picture is small and paste, can only see the interface, can not see the interface text;

The first oss approach is less explainable.

Here’s how to take screenshots and save them locally to share with you:

1. A way to take screenshots anywhere in the project

// There is a RepaintBoundary in MyApp in runApp
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
  // Write a global globalKey that can be used anywhere globally
    Glb().gKey = GlobalKey();
    // Use this component to take screenshots
    return RepaintBoundary(
      //key is the globalKey defined
      key: Glb().gKey,
      child: MaterialApp(
        title: 'Flutter Demo'.theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyCenter(), ), ); }}// Get the screenshot and save it locally
Future<Uint8List> _capturePng(String eventID) async {
  try {
    Key(' XXX '); localKey (' XXX ');
    RenderRepaintBoundary boundary =
    Glb().gKey.currentContext.findRenderObject();
    //pixelRatio compression ratio
    var image = await boundary.toImage(pixelRatio: 1.0);
    ByteData byteData = await image.toByteData(format: ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List(0);
    //path_provider
    Directory documentsDir = await getApplicationDocumentsDirectory();
    Directory directory = new Directory(documentsDir.path+'/flutter');
    if(! directory.existsSync()) { directory.createSync(); } final filename = eventID; print('${directory.path}/$filename');
    File('${directory.path}/$filename')
      ..createSync(recursive: true)
      ..writeAsBytesSync(pngBytes);
    return pngBytes;// This object is the image data
  } catch (e) {
    print(e);
  }
  return null;
}

// As for saving the path to iOS and Android, there will be a pub: path_provider, which can help us get the path to iOS and Android without having to write the plugin.
// Then you can obtain the image according to the path, upload the image, delete the image, delete the image directly with the delete function can be used, Directory can also be directly delete folder.
Copy the code

That’s all for this blog post, I believe you have already understood how to take screenshots and save to local and delete methods, upload oss methods you take your own path to get binary data directly upload on the line. In the next article, the base64 uploading method of pictures will be described completely.