提交 3e7d3b24 authored 作者: Sachin Ganesh's avatar Sachin Ganesh

-- screenshot

上级 52093d99
# screenshot
A new Flutter package project.
A simple plugin to capture widgets as Images.
This plugin wraps your widgets inside [RenderRepaintBoundary](https://docs.flutter.io/flutter/rendering/RenderRepaintBoundary-class.html)
[Source](https://stackoverflow.com/a/51118088)
## Getting Started
This project is a starting point for a Dart
[package](https://flutter.io/developing-packages/),
a library module containing code that can be shared easily across
multiple Flutter or Dart projects.
This handy plugin can be used to capture any Widget including full screen screenshots & individual widgets like Text().
1) Create Instance of Screenshot Controller
```dart
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
File _imageFile;
//Create an instance of ScreenshotController
ScreenshotController screenshotController = ScreenshotController();
@override
void initState() {
// TODO: implement initState
super.initState();
}
...
}
```
2) Wrap the widget that you want to capture inside **Screenshot** Widget. Assign the controller to screenshotController that you have created earlier
```dart
Screenshot(
controller: screenshotController,
child: Text("This text will be captured as image"),
),
```
3) Take the screenshot by calling capture method. This will return a File
```dart
screenshotController.capture().then((File image) {
//Capture Done
setState(() {
_imageFile = image;
});
}).catchError((onError) {
print(onError);
});
```
Example:
```dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Screenshot( //Screenshot Widget
controller: screenshotController, //asign Controller
//wrap the widgets that you want to capture as image
child: <Widget>[
Text(
'You have pushed the button this many times:' +
_counter.toString(),
),
FlutterLogo(),
],
),
_imageFile != null ? Image.file(_imageFile) : Container(),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_incrementCounter();
_imageFile = null;
screenshotController.capture().then((File image) {
setState(() {
_imageFile = image;
});
}).catchError((onError){
print(onError);
});
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
```
<img src="assets/screenshot.png" alt="screenshot" width="400"/>
By defualt, the captured image will be saved to Application Directory. Custom paths can be set using **path parameter**. Refer [path_provider](https://pub.dartlang.org/packages/path_provider)
```dart
final directory = (await getApplicationDocumentsDirectory ()).path; //from path_provide package
String fileName = DateTime.now().toIso8601String();
path = '$directory/$fileName.png';
screenshotController.capture(
path:path //set path where screenshot will be saved
);
```
## Note:
Captured image may look pixelated. You can overcome this issue by setting value for **pixelRatio**
>The pixelRatio describes the scale between the logical pixels and the size of the output image. It is independent of the window.devicePixelRatio for the device, so specifying 1.0 (the default) will give you a 1:1 mapping between logical pixels and the output pixels in the image.
```dart
screenshotController.capture(
pixelRatio: 1.5
)
```
## Known Bugs
- Image will not be updated if same filename is given multiple times
For help getting started with Flutter, view our
[online documentation](https://flutter.io/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
......@@ -49,7 +49,16 @@ class MyHomePage extends StatefulWidget {
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
File _imageFile;
ScreenshotController screenshotController;
//Create an instance of ScreenshotController
ScreenshotController screenshotController = ScreenshotController();
@override
void initState() {
// TODO: implement initState
super.initState();
}
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
......@@ -61,13 +70,6 @@ class _MyHomePageState extends State<MyHomePage> {
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
screenshotController = new ScreenshotController();
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
......@@ -88,12 +90,16 @@ class _MyHomePageState extends State<MyHomePage> {
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Screenshot(
controller: screenshotController,
child: Text(
'You have pushed the button this many times:' +
_counter.toString(),
),
),
controller: screenshotController,
child: Column(
children: <Widget>[
Text(
'You have pushed the button this many times:' +
_counter.toString(),
),
FlutterLogo(),
],
)),
_imageFile != null ? Image.file(_imageFile) : Container(),
],
),
......@@ -103,15 +109,14 @@ class _MyHomePageState extends State<MyHomePage> {
onPressed: () {
_incrementCounter();
_imageFile = null;
screenshotController.capture().then((image) {
screenshotController.capture().then((File image) {
//print("Capture Done");
setState(() {
_imageFile = image;
});
}).catchError((onError){
}).catchError((onError) {
print(onError);
});
},
tooltip: 'Increment',
child: Icon(Icons.add),
......
......@@ -10,9 +10,9 @@ import 'package:path_provider/path_provider.dart';
import 'dart:ui' as ui;
class ScreenshotController {
GlobalKey containerKey;
GlobalKey _containerKey;
ScreenshotController() {
containerKey = GlobalKey();
_containerKey = GlobalKey();
}
Future<File> capture({
String path = "",
......@@ -20,7 +20,7 @@ class ScreenshotController {
}) async {
try {
RenderRepaintBoundary boundary =
this.containerKey.currentContext.findRenderObject();
this._containerKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage(pixelRatio: pixelRatio);
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
......@@ -28,7 +28,6 @@ class ScreenshotController {
if (path == "") {
final directory = (await getApplicationDocumentsDirectory()).path;
String fileName = DateTime.now().toIso8601String();
//print('Path: $fileName');
path = '$directory/$fileName.png';
}
File imgFile = new File(path);
......@@ -69,9 +68,9 @@ class ScreenshotState extends State<Screenshot> with TickerProviderStateMixin {
super.didUpdateWidget(oldWidget);
if (widget.controller != oldWidget.controller) {
widget.controller.containerKey = oldWidget.controller.containerKey;
widget.controller._containerKey = oldWidget.controller._containerKey;
if (oldWidget.controller != null && widget.controller == null)
_controller.containerKey = oldWidget.controller.containerKey;
_controller._containerKey = oldWidget.controller._containerKey;
if (widget.controller != null) {
if (oldWidget.controller == null) {
_controller = null;
......@@ -83,7 +82,7 @@ class ScreenshotState extends State<Screenshot> with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return RepaintBoundary(
key: _controller.containerKey,
key: _controller._containerKey,
child: widget.child,
);
}
......
name: screenshot
description: A new Flutter Screenshot Package
description: Flutter Screenshot Package (Runtime)
version: 0.0.1
author: Sachin Ganesh <sachinganesh@outlook.com>
homepage: https://github.com/SachinGanesh/screenshot
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论