Flutter截图保存插件widgets_to_png的使用

Flutter截图保存插件widgets_to_png的使用

widgets_to_png 是一个Flutter包，允许将任何小部件转换为PNG图像并保存到设备相册。

功能

• 将任何小部件转换为PNG字节。
• 将捕获的小部件图像保存到文件。
• 将捕获的小部件图像保存到设备相册。
• 使用预定义或自定义值指定图像质量。

使用方法

1. 包装您的小部件

用 WidgetToPng 包装您想要捕获的小部件，并提供一个 GlobalKey 来标识它。

import 'package:flutter/material.dart';
import 'package:widgets_to_png/widgets_to_png.dart';

class MyWidget extends StatelessWidget {
  final GlobalKey _globalKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget to Image Example'), // 小部件转图片示例
      ),
      body: Center(
        child: WidgetToPng(
          keyToCapture: _globalKey, // 需要捕获的小部件的key
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(child: Text('Capture Me!')), // 捕捉我！
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await ImageConverter.saveWidgetToGallery(
            key: _globalKey,
            fileName: 'captured_widget.png', // 保存文件名为 captured_widget.png
          );
        },
        child: Icon(Icons.camera), // 相机图标
      ),
    );
  }
}

2. 将小部件作为字节捕获

使用 captureWidgetToBytes 方法将小部件作为字节捕获。您可以使用 ImageQuality 枚举或自定义质量值来指定图像质量。

import 'package:widgets_to_png/widgets_to_png.dart';

// 使用枚举指定图像质量
Uint8List? imageBytes = await ImageConverter.captureWidgetToBytes(
  key: _globalKey,
  imageQuality: ImageQuality.high, // 高质量
);

// 或者使用自定义质量值
Uint8List? imageBytes = await ImageConverter.captureWidgetToBytes(
  key: _globalKey,
  customImageQuality: 3.0, // 自定义质量值
);

3. 将字节保存到文件

使用 saveBytesToFile 方法将捕获的字节保存到文件。

import 'dart:io';
import 'package:widgets_to_png/widgets_to_png.dart';

File imageFile = await ImageConverter.saveBytesToFile(
  bytes: imageBytes!, // 捕获的字节
  filename: 'widget_image.png', // 文件名为 widget_image.png
);

4. 将字节转换为 XFile

使用 convertBytesToXFile 方法将捕获的字节转换为 XFile。

import 'package:image_picker/image_picker.dart';
import 'package:widgets_to_png/widgets_to_png.dart';

XFile imageXFile = await ImageConverter.convertBytesToXFile(
  bytes: imageBytes!, // 捕获的字节
  filename: 'widget_image.png', // 文件名为 widget_image.png
);

5. 将小部件保存到相册

使用 saveWidgetToGallery 方法直接将捕获的小部件图像保存到设备相册。

import 'package:widgets_to_png/widgets_to_png.dart';

await ImageConverter.saveWidgetToGallery(
  key: _globalKey,
  fileName: 'captured_widget.png', // 保存文件名为 captured_widget.png
);

类和方法

WidgetToPng

包装另一个小部件并允许其被捕获为图像的小部件。

ImageConverter

用于将小部件转换为图像并保存它们的实用类。

功能

• captureWidgetToBytes: 捕获由给定 GlobalKey 标识的小部件并返回图像字节。
• saveBytesToFile: 将给定的图像字节保存到具有指定 filename 的临时文件中。
• convertBytesToXFile: 将给定的图像字节转换为具有指定 filename 的 XFile。
• saveWidgetToGallery: 捕获由给定 GlobalKey 标识的小部件并将其与指定的 fileName 一起保存到相册中。

ImageQuality

表示捕获图像质量的枚举。

注意: 图像质量越高，转换小部件为字节所需的时间就越长。

示例

这是一个完整的示例，展示如何使用 widgets_to_png 包：

import 'package:flutter/material.dart';
import 'package:widgets_to_png/widgets_to_png.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final GlobalKey _globalKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widget to Image Example'), // 小部件转图片示例
        ),
        body: Center(
          child: WidgetToPng(
            keyToCapture: _globalKey, // 需要捕获的小部件的key
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(child: Text('Capture Me!')), // 捕捉我！
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            await ImageConverter.saveWidgetToGallery(
              key: _globalKey,
              fileName: 'captured_widget.png', // 保存文件名为 captured_widget.png
            );
          },
          child: Icon(Icons.camera), // 相机图标
        ),
      ),
    );
  }
}