In the digital age, screenshots are an essential component of daily routine life. They is an efficient part to collect and share the data. that can be very useful in a variety of circumstances. Mobile application screenshots can be used for a variety of the purposes including testing, debugging, documentation etc.. This blog main topic will be how to take a screenshot in a Flutter app.
When testing, debugging, or showcasing the user interface of your Flutter application, the ability to take screenshots is a useful feature. Flutter’s straightforward API makes taking screenshots a breeze. In this blog, we’ll look at how to screenshot in Flutter.
Flutter is a well liked and lightweight framework for building mobile applications . That provides a quick and simple way to create visually appealing, powerful mobile apps for the iOS and Android operating systems. Developers can easily create original interfaces and layouts with Flutter’s high variety of widgets and tools.
How to Programmatically take a Screenshot in flutter
Get started…
Step 1) : Add the Screenshot Package
You must first include the Screenshot package in your project in order to take screenshots in Flutter. In your pubspec.yaml file, open the dependencies section, and then add the following code:
screenshot: ^any
Step 2) : After saving the file launch flutter pub. enter your terminal and start the package download.
flutter pub get
Step 3) : import the file
import 'package:screenshot/screenshot.dart';
Step 4) :Make a screenshot controller
The creation of a Screenshot Controller instance is the next step. You can use this controller to take a screenshot of your widget.
final _screenshotController = ScreenshotController();
Step 5) :Wrap the screenshot of your widget
You must wrap your widget in the Screenshot widget in order to take a screenshot of it. following code should be included in the build method :
Screenshot( controller: _screenshotController, child: //your widget here, ),
The child property holds the widget that we want to screenshot , and the controller property gives us access to the Screenshot Controller object we previously set up.
Step 6) : Taking a Screenshot
By calling the capture() method on the Screenshot Controller instance, you can finally take a screenshot. Here is an illustration of how to use a floating action button to invoke the capture() method:
FloatingActionButton(
onPressed: () async {
final image = await _screenshotController.capture();
/// do something with the image
},
child: Icon(Icons.camera_alt),
),
Step 7) :How to Show or Save a Screenshot
After taking the screenshot you have the option of viewing it or saving it to as a file. An example of how to show the screenshot that was taken is provided here below :
Image.memory( image, fit:BoxFit.cover, ),
here,…. you can save screenshot image data to a file use writeAsBytes function in flutter framework .
final directory = await getApplicationDocumentsDirectory();
final imagePath = '${directory.path}/screenshot.png';
final file = File(imagePath);
await file.writeAsBytes(image);
Step 8) :Reduce the Controller Widget and Screenshot Widget.
It’s critical to remove the Screenshot widget and the Screenshot Controller instance from your code after the screenshot has been taken in order to avoid any performance impact. To accomplish this, set the controller property of the Screenshot widget to null:
Screenshot(
controller: null,
child: //your widget here,
),
Additionally, by removing the Screenshot Controller instance:
@override
void dispose() {
///Controller dispose here
super.dispose();
}
It’s over now! These easy steps will help you take screenshots of your Flutter app.
screenshot of a widget using RepaintBoundary in Flutter
Video Tutorial
i) : order to take the screenshots of widgets . we will use RepaintBoundary widget as the parent widget. Global key must be used to specify RepaintBoundary.
Visit Flutter RepaintBoundary for more information.
static GlobalKey screen = new GlobalKey();
RepaintBoundary(
key: screen,
child: ChildWidgets(
)
So that it can be quickly saved in device local storage and transformed into an image bites, the RepaintBoundary widget must then be converted to an image.
Step 1) :Use RepaintBoundary to create widget.
Make widget in your file called MyWidget or any name :
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: Container(
color: Colors.blue,
width: 200,
height: 200,
child: Center(
child: Text(
'Hello World!',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
}
This widget has a 300 pixel wide by 300 pixel high container with a white background a font size of 30 bold font weight blue background.
We must first create a GlobalKey object to identify the widget from which we want to take the screenshot. There will also be developed a function called captureScreenshot that will take a screenshot and store it on the device storage.
/// here Define the function to capture the screenshot
Future<void> captureScreenshot() async {
try {
/// Find boundary of the RepaintBoundary widget
RenderRepaintBoundary boundary =
_globalKey.currentContext.findRenderObject();
/// Convert the widget to image
ui.Image image = await boundary.toImage(pixelRatio: 3.0);
// Convert image to a byte data
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
/// Convert byte data to an Uint8List
Uint8List pngBytes = byteData.buffer.asUint8List();
/// Get the application documents directory to save the screenshot widget
final directory = (await getApplicationDocumentsDirectory()).path;
/// Create file object and save the screenshot
File imgFile = File('$directory/screenshot.png');
await imgFile.writeAsBytes(pngBytes);
/// Print message indicating that the screenshot has been taken
print('Screenshot taken successfully' );
} catch (e) {
// Handle the error if there is any
print(e);
}
}
This code creates a Flutter application that use RepaintBoundary to take screenshot of a widget in flutter . The widget that needs to be captured is wrap in the RepaintBoundary widget .the widget is identified by a global key in flutter.
When the user selects the Take Screenshot button the screenshot is saved to the device local storage .The RepaintBoundary widget boundary is located the captureScreenshot function is invoked and the widget is converted to an image. the image is converted to byte data. byte data is converted to an Uint8List and screenshot is saved in local storage.
For , get this screenshots code , click here…..
Conclusion 👍
I hope you can put this to use.To take a screenshot. use the Flutter screenshot package. With the help of this package we can take screenshot in a specific widget or the entire application screen. In this blog post, we will look at using this package to take screenshot in Flutter application. This example code can be changed to suit your requirements.
Thanks for reading this article……
Have a beautiful day…..
