Flutter将Widgets转换为图片插件widgets_to_image_plus的使用

Flutter将Widgets转换为图片插件widgets_to_image_plus的使用

widgets_to_image_plus 是一个功能强大的Flutter库，旨在将Flutter小部件捕获为图片。该库提供了多种功能，使开发人员能够操作和自定义从Flutter小部件生成的图片，从而增强应用程序的视觉效果和交互性。

功能特性

• 捕获小部件为图片：轻松将任何Flutter小部件转换为多种格式的图片，包括PNG和JPEG。
• 图片操作：对捕获的图片应用各种变换，如：
  • 灰度转换
  • 添加水印
  • 自定义背景颜色
  • 生成缩略图
• 图片效果：通过多种效果增强图片，包括：
  • 旋转
  • 颜色反转
  • 褐色调
  • 亮度、对比度和饱和度调整
  • 暗角效果
  • 边框和圆角
  • 水平和垂直翻转

安装

要将 widgets_to_image_plus 集成到你的Flutter项目中，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  widgets_to_image_plus: ^0.0.1

导入库

在Dart文件中导入库：

import 'package:widgets_to_image_plus/widgets_to_image_plus.dart';

完整示例代码

以下是一个完整的示例代码，展示了如何使用 widgets_to_image_plus 捕获小部件并显示为图片：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:ui' as ui;
import 'package:widgets_to_image_plus/widgets_to_image_plus.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyApp> {
  final WidgetToImagePlus _controller = WidgetToImagePlus();
  Uint8List? _imageBytes;

  // 捕获图片
  Future<void> _captureImage() async {
    final bytes = await _controller.simpleCapture(format: ui.ImageByteFormat.png);
    _setImage(bytes);
  }

  // 捕获为灰度图片
  Future<void> _captureAsGrayscale() async {
    final bytes = await _controller.captureAsGrayscale();
    _setImage(bytes);
  }

  // 捕获并添加水印
  Future<void> _captureWithWatermark() async {
    final bytes = await _controller.captureWithWatermark(watermark: "Watermark");
    _setImage(bytes);
  }

  // 捕获并设置背景颜色
  Future<void> _captureWithBackground() async {
    final bytes = await _controller.captureWithBackground(backgroundColor: Colors.red);
    _setImage(bytes);
  }

  // 生成缩略图
  Future<void> _generateThumbnail() async {
    final bytes = await _controller.generateThumbnail();
    _setImage(bytes);
  }

  // 捕获并旋转图片
  Future<void> _captureWithRotation() async {
    final bytes = await _controller.captureWithRotation(angle: 0.5);
    _setImage(bytes);
  }

  // 捕获并反转颜色
  Future<void> _captureWithInvertedColors() async {
    final bytes = await _controller.captureWithInvertedColors();
    _setImage(bytes);
  }

  // 捕获并应用褐色调
  Future<void> _captureWithSepia() async {
    final bytes = await _controller.captureWithSepia();
    _setImage(bytes);
  }

  // 捕获并调整亮度
  Future<void> _captureWithBrightness() async {
    final bytes = await _controller.captureWithBrightness(brightness: 0.5);
    _setImage(bytes);
  }

  // 捕获并调整对比度
  Future<void> _captureWithContrast() async {
    final bytes = await _controller.captureWithContrast(contrast: 1.5);
    _setImage(bytes);
  }

  // 捕获并调整饱和度
  Future<void> _captureWithSaturation() async {
    final bytes = await _controller.captureWithSaturation(saturation: 1.5);
    _setImage(bytes);
  }

  // 捕获并应用暗角效果
  Future<void> _captureWithVignette() async {
    final bytes = await _controller.captureWithVignette(radius: 0.5, color: Colors.black);
    _setImage(bytes);
  }

  // 捕获并添加边框
  Future<void> _captureWithBorder() async {
    final bytes = await _controller.captureWithBorder(thickness: 20, color: Colors.black);
    _setImage(bytes);
  }

  // 捕获并应用圆角
  Future<void> _captureWithRoundedCorners() async {
    final bytes = await _controller.captureWithRoundedCorners(radius: 20);
    _setImage(bytes);
  }

  // 捕获并水平翻转
  Future<void> _captureWithHorizontalFlip() async {
    final bytes = await _controller.captureWithHorizontalFlip();
    _setImage(bytes);
  }

  // 捕获并垂直翻转
  Future<void> _captureWithVerticalFlip() async {
    final bytes = await _controller.captureWithVerticalFlip();
    _setImage(bytes);
  }

  // 设置捕获的图片
  void _setImage(Uint8List? bytes) {
    if (bytes != null) {
      setState(() {
        _imageBytes = bytes;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("捕获小部件为图片"),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RepaintBoundary(
                key: _controller.containerKey,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Hello, Flutter!',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white, fontSize: 24),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              Wrap(
                spacing: 10,
                runSpacing: 20,
                alignment: WrapAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: _captureImage,
                    child: Text("捕获图片"),
                  ),
                  ElevatedButton(
                    onPressed: _captureAsGrayscale,
                    child: Text("捕获为灰度图片"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithWatermark,
                    child: Text("捕获并添加水印"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithBackground,
                    child: Text("捕获并设置背景颜色"),
                  ),
                  ElevatedButton(
                    onPressed: _generateThumbnail,
                    child: Text("生成缩略图"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithRotation,
                    child: Text("捕获并旋转"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithInvertedColors,
                    child: Text("捕获并反转颜色"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithSepia,
                    child: Text("捕获并应用褐色调"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithBrightness,
                    child: Text("捕获并调整亮度"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithContrast,
                    child: Text("捕获并调整对比度"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithSaturation,
                    child: Text("捕获并调整饱和度"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithVignette,
                    child: Text("捕获并应用暗角效果"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithBorder,
                    child: Text("捕获并添加边框"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithRoundedCorners,
                    child: Text("捕获并应用圆角"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithHorizontalFlip,
                    child: Text("捕获并水平翻转"),
                  ),
                  ElevatedButton(
                    onPressed: _captureWithVerticalFlip,
                    child: Text("捕获并垂直翻转"),
                  ),
                ],
              ),
              SizedBox(height: 20),
              if (_imageBytes != null)
                Image.memory(_imageBytes!), // 显示捕获的图片
            ],
          ),
        ),
      ),
    );
  }
}