Flutter小部件转换为图像插件davinci的介绍与使用

#Flutter小部件转换为图像插件davinci的介绍与使用

📸 Davinci简介

Davinci 是一个强大的Flutter插件，它允许你将任何小部件转换为图像，并可以保存到本地或跨应用程序和聊天分享。非常适合创建UI快照！

🛠️ 支持平台

欢迎在其他平台上进行测试并反馈你的发现！

Prerequisites（前置条件）

对于iOS

在<project root>/ios/Runner/Info.plist文件中添加以下键：

• NSPhotoLibraryUsageDescription - 描述为什么应用需要访问照片库的权限。

对于Android

在AndroidManifest.xml中添加以下权限：

• android.permission.WRITE_EXTERNAL_STORAGE - 外部存储使用的权限。

ℹ️ 使用方法

导入

import 'package:davinci/core/davinci_capture.dart';
import 'package:davinci/davinci.dart';

代码示例

如果小部件已经在小部件树中，使用click方法：

如果小部件不在小部件树中，使用offStage方法：

🎨 自定义

所有click方法中的参数都存在于offStage方法中，除了brandTag属性。

bell️ 注意事项

• 如果希望将生成的图像保存到本地，请记得在Info.plist和AndroidManifest.xml中添加必要的权限。

示例代码

下面是一个完整的示例，展示了如何使用Davinci插件来捕获小部件的屏幕截图。

import 'package:davinci/davinci.dart';
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';

void main() {
  runApp(const MaterialApp(home: App(), debugShowCheckedModeBanner: false));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  AppState createState() => AppState();
}

class AppState extends State<App> {
  /// 创建一个全局key变量
  GlobalKey? imageKey;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF9C5D1),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// 包裹目标小部件
            Davinci(
              builder: (key) {
                /// 设置小部件key到全局key
                imageKey = key;
                return Container(
                  height: 150,
                  width: double.infinity,
                  color: Colors.black,
                  child: Padding(
                    padding: const EdgeInsets.all(18.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          height: 50,
                          width: 50,
                          color: Colors.red,
                        ),
                        Container(
                          height: 50,
                          width: 50,
                          color: Colors.yellow,
                        ),
                        Container(
                          height: 50,
                          width: 50,
                          color: Colors.green,
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
            Padding(
              padding: const EdgeInsets.only(top: 30.0),
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xff9795EF),
                ),
                onPressed: () async {
                  /// 将全局key传递给DavinciCapture.click。
                  await DavinciCapture.click(
                    context: context,
                    imageKey!,
                    pixelRatio: 3,
                    saveToDevice: true,
                    openFilePreview: false,
                    albumName: "Davinci",
                  );
                },
                child: const Text('捕获屏幕上小部件',
                    style: TextStyle(
                      color: Colors.white,
                    )),
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xff9795EF),
              ),
              onPressed: () async {
                /// 捕获未在小部件树中的小部件
                await DavinciCapture.offStage(
                    context: context, widget: const PreviewWidget());
              },
              child: const Text('捕获离屏小部件'),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xff9795EF),
              ),
              onPressed: () async {
                /// 添加底部信息到离屏小部件
                await DavinciCapture.offStage(
                  context: context,
                  widget: const PreviewWidget(),
                  brandTag: BrandTagConfiguration(
                    padding: const EdgeInsets.only(left: 20, right: 20),
                    decoration: const BoxDecoration(color: Colors.black),
                    leading: const Text(
                      "动态添加的底部信息，灵感来自Reddit",
                      style: TextStyle(fontSize: 14),
                    ),
                    trailing: const Icon(
                      LineIcons.redditAlien,
                      color: Color(0xffFF4500),
                    ),
                  ),
                );
              },
              child: const Text('带底部信息捕获离屏小部件'),
            )
          ],
        ),
      ),
    );
  }
}

/// 此小部件在App挂载时并未挂载。
class PreviewWidget extends StatelessWidget {
  const PreviewWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: double.infinity,
      color: Colors.orange,
      child: const Center(
        child: Text(
          "此小部件不在小部件树中",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

以上是关于Davinci插件的完整介绍和使用指南，包括了如何设置、使用以及自定义的方法。通过这个插件，你可以轻松地将Flutter应用中的小部件转换成图片并进行分享或保存。