Flutter 插件davincii的探索使用

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 Flutter

Flutter 插件davincii的探索使用

预览

使用

警告：从版本2.1.0开始，在click和offStage方法中传递context变得必要。这是由于Flutter版本3.10中的一些已弃用的方法。

前提条件

在iOS上

在您的Info.plist文件中添加以下键，该文件位于<项目根目录>/ios/Runner/Info.plist：

  • NSPhotoLibraryUsageDescription - 描述您的应用为什么需要访问照片库权限。在可视化编辑器中，这被称为“隐私 - 照片库使用描述”。

在Android上

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

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

导入

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

伪代码

如果小部件在widget树中 如果小部件不在widget树中

动态品牌底部

可以为可添加到离线小部件的小部件添加动态品牌底部。

注意事项

此品牌底部（brandTag参数）目前仅在offStage方法中可用。对于click方法，它很快就会添加。

品牌底部可以这样添加：

await DavinciCapture.offStage(
  context: context,
  const PreviewWidget(),

  /// 动态添加底部以用于离线小部件
  brandTag: BrandTagConfiguration(
    padding: const EdgeInsets.only(left: 20, right: 20),
    decoration: const BoxDecoration(color: Colors.black),
    leading: const Text(
      "Footer dyamically added, Inspired from Reddit",
      style: TextStyle(fontSize: 14),
    ),
    trailing: const Icon(
      LineIcons.redditAlien,
      color: Color(0xffFF4500),
    ),
  ),
);

默认情况下，生成的图像名称将是"davincii"。如果您希望更改它，可以在DavinciCapture.click方法中传递图像名称。

await DavinciCapture.click(context: context, imageKey, fileName: "Hello");

当捕获图像时，您可以选择打开图像预览或获取图像的Uint8List。

await DavinciCapture.click(context: context, imageKey, fileName: "Hello", openFilePreview = false, returnImageUint8List = true);

如果捕获的图像是像素化的，请根据设备动态计算像素比，并将其传递给DavinciCapture.click方法。

double pixelRatio = MediaQuery.of(context).devicePixelRatio;

await DavinciCapture.click(context: context, imageKey, fileName: "Hello", pixelRatio: pixelRatio);

要将图像直接保存到设备，请将saveToDevice标志设置为true。您也可以指定相册名称，或者将其留空。

await DavinciCapture.click(context: context, imageKey, fileName: "Hello", saveToDevice = true, album: "Davinci", openFilePreview = false);

注意事项

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

示例代码

import 'package:davincii/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](/user/override)
  AppState createState() => AppState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF9C5D1),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// 将所需的小部件包装在Davinci小部件中
            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);
                },
                child: const Text('Capture widget in screen',
                    style: TextStyle(
                      color: Colors.white,
                    )),
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xff9795EF),
              ),
              onPressed: () async {
                /// 如果小部件不在widget树中或不在屏幕上
                /// 传递要转换为图像的小部件。
                await DavinciCapture.offStage(
                    context: context, const PreviewWidget());
              },
              child: const Text('Capture widget off-stage'),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xff9795EF),
              ),
              onPressed: () async {
                /// 如果小部件不在widget树中或不在屏幕上
                /// 传递要转换为图像的小部件。
                /// 我们还可以为离线小部件添加底部
                await DavinciCapture.offStage(
                  context: context,
                  const PreviewWidget(),

                  /// 动态添加底部以用于离线小部件
                  brandTag: BrandTagConfiguration(
                    padding: const EdgeInsets.only(left: 20, right: 20),
                    decoration: const BoxDecoration(color: Colors.black),
                    leading: const Text(
                      "Footer dyamically added, Inspired from Reddit",
                      style: TextStyle(fontSize: 14),
                    ),
                    trailing: const Icon(
                      LineIcons.redditAlien,
                      color: Color(0xffFF4500),
                    ),
                  ),
                );
              },
              child: const Text('Capture widget off-stage with footer'),
            )
          ],
        ),
      ),
    );
  }
}

/// 当应用程序加载时，此小部件未被挂载。
class PreviewWidget extends StatelessWidget {
  const PreviewWidget({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: double.infinity,
      color: Colors.orange,
      child: const Center(
        child: Text(
          "This widget was not in widget tree",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

更多关于Flutter 插件davincii的探索使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter 插件davincii的探索使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


探索和使用Flutter中的未知功能插件（如davincii）时，通常我们需要先查阅该插件的官方文档或者源代码来了解其功能和用法。由于davincii并非一个广为人知的Flutter插件（在撰写此回复时，根据我的知识库，davincii并未作为一个知名Flutter插件出现），我将提供一个通用的模板代码，用于集成和使用一个假设的Flutter插件。请根据实际情况调整代码。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加该插件的依赖。假设davincii插件的依赖项如下：

dependencies:
  flutter:
    sdk: flutter
  davincii: ^x.y.z  # 替换为实际的版本号

运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入该插件：

import 'package:davincii/davincii.dart';

3. 使用插件功能

由于davincii的具体功能未知，我将提供一个假设性的使用案例。假设davincii插件提供了一个用于生成艺术风格图片的功能。

import 'package:flutter/material.dart';
import 'package:davincii/davincii.dart';  // 假设的导入路径

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Davincii Plugin Demo'),
        ),
        body: Center(
          child: DavinciiDemo(),
        ),
      ),
    );
  }
}

class DavinciiDemo extends StatefulWidget {
  @override
  _DavinciiDemoState createState() => _DavinciiDemoState();
}

class _DavinciiDemoState extends State<DavinciiDemo> {
  String result = '';

  @override
  void initState() {
    super.initState();
    _generateArt();
  }

  Future<void> _generateArt() async {
    try {
      // 假设 Davincii 有一个 generateArt 方法，需要传入一些参数
      String art = await Davincii.generateArt(
        prompt: 'A beautiful sunset over the ocean',
        style: 'Impressionism',
        // 其他可能的参数...
      );
      
      setState(() {
        result = art; // 这里假设返回的是图片的Base64编码或其他表示形式
      });
      
      // 如果返回的是图片数据，你可以使用 Image.memory 显示图片
      // Image.memory(base64Decode(art));
      
    } catch (e) {
      print('Error generating art: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Generated Art:'),
        Text(result), // 这里简单显示结果，实际中可能需要显示图片
      ],
    );
  }
}

注意事项

  1. 查阅文档：务必查阅davincii插件的官方文档，了解所有可用的方法和参数。
  2. 错误处理：在实际应用中，添加更全面的错误处理逻辑。
  3. 权限：如果davincii插件需要特定的权限（如访问网络、存储等），请确保在AndroidManifest.xml和Info.plist中正确配置。
  4. 更新依赖：定期检查并更新依赖项，以确保使用最新功能和修复。

由于davincii的具体实现和功能未知，上述代码仅作为探索和使用未知Flutter插件的一个模板。请根据实际情况和插件文档进行调整。

回到顶部