Take Screenshot of any Widget programmatically in Flutter
Sometimes, we really need to capture specific things from our application but we don’t know how to do it in few steps without using any external package that’s reason I am here to discuss the programmatic technique to capture your flutter widgets on a single tap.
Steps to Convert a widget into Image bytes
First you need to create a global key that will be associated with the widget you wish to convert to an image and you must wrap your widget with RepaintBoundary widget.
As you can see in given image that I initialized a global key as ssKey and assigned it to RepaintBoundary of my specific Container.
Now, we will crreate a method and move to the steps that will generate an image for us. Let’s go!
Screenshot Method
1 — Initialize a variable of type RenderRepaintBoundary which will hold the render object of our key widget, aliased as same as data type.
2 — Now, we will convert the repaint boundary into image object by using the toImage method. This method has a pixelRatio parameter which contains default value as 1.0 but you can increase the value to get the high resolution, clear and sharp image as you can see in the code snippet.
3 — In this step we will extract the byte data of the image object by calling the toByteData method. You can change the byte format by using the format parameter as I used png format.
4 — Finally, We can find the image memory data by converting the byte buffer in the form of Uint8List.
Hurray! You can easily use the Uint8List value in Image.memory or MemoryImage to showcase your screenshot.
You can also watch my explanatory video on this topic to clear your confusions.
I hope you enjoyed it. Don’t forget to give a thumbs-up.
Keep reading!
