Skip to content

S
screenshot
提交 6cdedcdf authored 作者: Sachin Ganesh's avatar Sachin Ganesh
浏览文件
操作

Update README

上级 1265f8d5
隐藏空白字符变更
内嵌 并排
正在显示 包含 14 行增加 和 81 行删除
README.md
浏览文件 @ 6cdedcdf
<img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/sc.png" alt="screenshot"/>
A simple package to capture widgets as Images. Now you can capture widgets that are not rendered on the screen!
A simple package to capture widgets as Images. Now you can also capture the widgets that are not rendered on the screen!
This package wraps your widgets inside [RenderRepaintBoundary](https://docs.flutter.io/flutter/rendering/RenderRepaintBoundary-class.html)
[Source](https://stackoverflow.com/a/51118088)
---
<br>
<div style="display: flex;">
<div style="flex: 40%; padding: 5px;">
<img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/screenshot.gif" alt="screenshot"/>
</div>
<div style="flex: 60%; padding: 5px;">
<p>&nbsp; Capture a widget part of the widget tree:</p>
<img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/code1.png" alt="screenshot"/>
<hr>
<p>&nbsp;Capture an invisible widget (a widget which is not part of the widget tree):</p>
<img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/code2.png" alt="screenshot"/>
</div>
</div>
| | |
| :---: | :---: |
|<img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/screenshot.gif" alt="screenshot"/>|<p>&nbsp; Capture a `widget`:</p><img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/code1.png" alt="screenshot"/><hr><p>&nbsp;Capture an `invisible widget` (a widget which is not part of the widget tree):</p><img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/code2.png" alt="screenshot"/>|
---
## Getting Started
This handy package can be used to capture any Widget including full screen screenshots & individual widgets like Text().
This handy package can be used to capture any Widget including full screen screenshots & individual widgets like `Text()`.
1) Create Instance of Screenshot Controller
1) Create Instance of `Screenshot Controller`
```dart
class _MyHomePageState extends State<MyHomePage> {
......@@ -44,7 +33,7 @@ class _MyHomePageState extends State<MyHomePage> {
...
}
```
2) Wrap the widget that you want to capture inside **Screenshot** Widget. Assign the controller to screenshotController that you have created earlier
2) Wrap the widget that you want to capture inside `Screenshot` Widget. Assign the controller to `screenshotController` that you have created earlier
```dart
Screenshot(
......@@ -53,7 +42,7 @@ Screenshot(
),
```
3) Take the screenshot by calling capture method. This will return a Uint8List
3) Take the screenshot by calling `capture` method. This will return a `Uint8List`
```dart
screenshotController.capture().then((Uint8List image) {
......@@ -68,7 +57,7 @@ screenshotController.capture().then((Uint8List image) {
---
## Capturing Widgets that are not in the widget tree
You can capture invisible widgets by pr
You can capture invisible widgets by calling `captureFromWidget` and passing a widget tree to the function
```dart
screenshotController
......@@ -84,73 +73,16 @@ screenshotController
// Handle captured image
});
},
```
---
Example:
```dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: new Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Screenshot(
controller: screenshotController,
child: Column(
children: <Widget>[
Text(
'You have pushed the button this many times:' +
_counter.toString(),
),
FlutterLogo(),
],
),
),
_imageFile != null ? Image.memory(_imageFile) : Container(),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_incrementCounter();
_imageFile = null;
screenshotController
.capture()
.then((Uint8List image) async {
//print("Capture Done");
setState(() {
_imageFile = image;
});
final result =
await ImageGallerySaver.save(image); // Save image to gallery, Needs plugin https://pub.dev/packages/image_gallery_saver
print("File Saved to Gallery");
}).catchError((onError) {
print(onError);
});
},
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
```
<img src="https://github.com/SachinGanesh/screenshot/raw/master/assets/screenshot.png" alt="screenshot" width="400"/>
---
## Saving images to Specific Location
For this you can use captureAndSave method by passing directory location. By default, 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)
For this you can use `captureAndSave` method by passing directory location. By default, 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)
### Note
>Method captureAndSave is not supported for web.
>Method `captureAndSave` is not supported for `web`.
```dart
......@@ -178,7 +110,7 @@ Captured image may look pixelated. You can overcome this issue by setting value
double pixelRatio = MediaQuery.of(context).devicePixelRatio;
screenshotController.capture(
pixelRatio: pixelRatio
pixelRatio: pixelRatio //1.5
)
```
---
......@@ -196,5 +128,5 @@ screenshotController.capture(delay: Duration(milliseconds: 10))
```
---
## Known Issues
- Platform Views are not supported. (Example: Google Maps, Camera etc)
- **`Platform Views are not supported. (Example: Google Maps, Camera etc)`**
---
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论