Flutter- Screenshot Package
Flutter is a popular framework by Google which is growing fast with its growing community. The Flutter has created a buzz through its libraries, making the development fast-paced.
Nowadays, everyone loves to take screenshots. If your application involves the use of screenshots, Flutter got a package for it. Not only for this purpose, but it is very helpful in the testing and debugging process. The fast-changing data screens can be captured through screenshots, and doing this manually is a boring task as well as time-wasting. The screenshot package automates the process of capturing the widgets you want to capture and storing them somewhere. If you want your user to capture only certain widgets of the screen, not an entire screen, this package is here to help you. In this article, we will implement a screenshot package in Flutter.
Follow the article to see how to do screenshot work in Flutter.
Step 1: Add the following dependency in your pubspec.yaml file.
Add the given dependency in pubspec.yaml file.
Now click on the pub get to configure it. Or add dependency directly to the pubspec.yaml from the terminal by writing the below code in the terminal.
flutter pub add screenshot
Step 2: Import the library.
Step 3: Navigate to main.dart.
First, move to the main.dart and modify the main function. When you create a Flutter app, some lines of code are already written for you. We are going to keep it. Remove the stateless widget MyHomePage from the code, and keep only the below-shown code. Then give our first screen of the app in the home: HomePage().
Step 4: Declare StatefulWidget() for HomePage() class
Create another dart file home.dart where we will create a stateful HomePage() class. In that HomePage() class, we have given screenshotController. After that, we have declared Scaffold() in which we have declared appbar that consists of the title of the app – “Screenshot Demo App”. In the body section, we have declared the Screenshot widget that takes screenshotController as a parameter wrapped with the center widget.
We have created two ElevatedButton, one shows the decreasing timer and the other is an increasing timer. We can take a screenshot of both the buttons by pressing another button that shows Capture above Widget. This will show the captured widget on a different screen. Remember, we need to wrap all the widgets inside the Screenshot widget whose screenshot you want. We have wrapped both the timers as well as their respective texts inside the Screenside widget. At the respective particular values, both timers will stop, and by clicking the refresh button their values will be reset.
Sometimes, it takes time to load the widgets on the screen, and they are invisible until they are not on the screen. But with this library, we can even capture them. To show that, we have created an invisible widget, that is captured when another button that shows Capture An Invisible Widget is pressed. This will show the invisible widget on another screen.
The captured screenshots:
Save Screenshots to Gallery:
To save screenshots in the gallery, we need to write additional code for them in the previously shown code. We will be using a package – image_gallery_saver for this purpose. Add below dependency in pubspec.yaml file.
Now, run pub get to configure it, and we need to import the library in our home.dart file.
Now, we need to create a function to which we will pass captured images to save to the Gallery.
Here, we created an asynchronous function that takes Uint8List type data as input. We can save images as files or bytes but we need to convert them to a specific type. Since the screenshots captured are in bytes format, we are using the saveImage function to save the screenshot. Now, we need to call the function, we will be calling this function each time we capture a screenshot, both of a visible widget and an invisible widget. See the complete code of the home.dart below.
Complete Source Code:
Please Login to comment...