Flutter功能未明确定义插件lumos的使用

Flutter功能未明确定义插件lumos的使用

Lumos 是一个强大的 Flutter 图像编辑包，它允许开发者轻松地将图像编辑功能集成到他们的应用程序中。以下是关于如何使用 Lumos 插件的完整示例。

关于项目

Lumos 使开发者能够无缝地将诸如裁剪、旋转、翻转、滤镜等功能直接集成到他们的应用中，提供用户增强和自定义图像的强大工具。无论您是在构建照片分享应用、电子商务平台还是创意工具，Flutter 图像编辑器都提供了直观界面和高效性能的多功能解决方案。

特性

• 裁剪、旋转和翻转图像。
• 实时应用滤镜和效果。
• 调整亮度、对比度、饱和度等。
• 在图像上添加文本和表情符号。
• 编辑单个甚至多个图像。
• 暗黑模式和亮模式。
• 模糊图像。
• 无缝撤销和重做更改。

使用方法

单张图像编辑

// 打开单图像编辑器
Uint8List editedImage = await Navigator.push(
  context,
  CupertinoPageRoute(
    builder: (context) => SingleImageEditor(
      image: image, // 用户要编辑的图像引用
      darkTheme: true, // 主题为暗黑主题
      background: EditorBackground.blur, // 编辑器背景为模糊
      viewportSize: MediaQuery.of(context).size, // 用户设备的视口大小
      features: const ImageEditorFeatures( // 启用的编辑功能
        crop: true, // 裁剪
        rotate: true, // 旋转
        adjust: true, // 调整
        emoji: true, // 表情符号
        filters: true, // 滤镜
        flip: true, // 翻转
        text: true, // 文本
        blur: true, // 模糊
      ),
      cropAvailableRatios: const [ // 可用的裁剪比例
        AspectRatioOption(title: 'Freeform'),
        AspectRatioOption(title: '1:1', ratio: 1),
        AspectRatioOption(title: '4:3', ratio: 4 / 3),
        AspectRatioOption(title: '5:4', ratio: 5 / 4),
        AspectRatioOption(title: '7:5', ratio: 7 / 5),
        AspectRatioOption(title: '16:9', ratio: 16 / 9),
      ],
    ),
  ),
);

多张图像编辑

// 打开多图像编辑器
List<Uint8List> editedImages = await Navigator.push(
  context!,
  CupertinoPageRoute(
    builder: (context) => MultiImageEditor(
      images: images, // 用户要编辑的图像列表
      darkTheme: false, // 主题为亮模式
      background: EditorBackground.none, // 编辑器背景无
      viewportSize: MediaQuery.of(context).size, // 用户设备的视口大小
      features: const ImageEditorFeatures( // 启用的编辑功能
        crop: true, // 裁剪
        rotate: true, // 旋转
        adjust: true, // 调整
        emoji: true, // 表情符号
        filters: true, // 滤镜
        flip: true, // 翻转
        text: true, // 文本
        blur: true, // 模糊
      ),
      cropAvailableRatios: const [ // 可用的裁剪比例
        AspectRatioOption(title: 'Freeform'),
        AspectRatioOption(title: '1:1', ratio: 1),
        AspectRatioOption(title: '4:3', ratio: 4 / 3),
        AspectRatioOption(title: '5:4', ratio: 5 / 4),
        AspectRatioOption(title: '7:5', ratio: 7 / 5),
        AspectRatioOption(title: '16:9', ratio: 16 / 9),
      ],
    ),
  ),
);

参数说明

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 Lumos 插件进行图像编辑：

import 'dart:typed_data';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:lumos/lumos.dart';
import 'package:lumos/model/models.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lumos',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Lumos Image Editor'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ImagePicker picker = ImagePicker();

  Uint8List? editedImage;
  List<Uint8List>? editedImages;

  Future<void> uploadPostSingleImage({
    BuildContext? context,
    required XFile image,
  }) async {
    editedImage = await Navigator.push(
      context!,
      CupertinoPageRoute(
        builder: (context) => SingleImageEditor(
          image: image,
          darkTheme: true,
          background: EditorBackground.blur,
          viewportSize: MediaQuery.of(context).size,
          features: const ImageEditorFeatures(
            crop: true,
            adjust: true,
            rotate: true,
            emoji: true,
            filters: true,
            flip: true,
            text: true,
            blur: true,
          ),
          cropAvailableRatios: const [
            AspectRatioOption(title: 'Freeform'),
            AspectRatioOption(title: '1:1', ratio: 1),
            AspectRatioOption(title: '4:3', ratio: 4 / 3),
            AspectRatioOption(title: '5:4', ratio: 5 / 4),
            AspectRatioOption(title: '7:5', ratio: 7 / 5),
            AspectRatioOption(title: '16:9', ratio: 16 / 9),
          ],
        ),
      ),
    );
  }

  Future<void> uploadPostMultipleImages({
    BuildContext? context,
    required List<XFile> images,
  }) async {
    editedImages = await Navigator.push(
      context!,
      CupertinoPageRoute(
        builder: (context) => MultiImageEditor(
          images: images,
          darkTheme: true,
          background: EditorBackground.gradient,
          viewportSize: MediaQuery.of(context).size,
          features: const ImageEditorFeatures(
            crop: true,
            adjust: true,
            rotate: true,
            emoji: true,
            filters: true,
            flip: true,
            text: true,
            blur: true,
          ),
          cropAvailableRatios: const [
            AspectRatioOption(title: 'Freeform'),
            AspectRatioOption(title: '4:3', ratio: 4 / 3),
            AspectRatioOption(title: '5:4', ratio: 5 / 4),
            AspectRatioOption(title: '7:5', ratio: 7 / 5),
            AspectRatioOption(title: '16:9', ratio: 16 / 9),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView(
          scrollDirection: Axis.vertical,
          padding: const EdgeInsets.all(20),
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                final XFile? image =
                    await picker.pickImage(source: ImageSource.gallery);
                if (image != null) {
                  await uploadPostSingleImage(
                    context: context,
                    image: image,
                  );
                  setState(() {});
                }
              },
              child: const Text('单张图像编辑器'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final List<XFile> images = await picker.pickMultiImage();
                if (images.isNotEmpty) {
                  await uploadPostMultipleImages(
                    context: context,
                    images: images,
                  );
                  setState(() {});
                }
              },
              child: const Text('多张图像编辑器'),
            ),
            const SizedBox(height: 20),
            if (editedImage != null)
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.memory(
                    editedImage!,
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height / 4,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            if (editedImages != null)
              ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: editedImages!.length,
                itemBuilder: (context, index) {
                  return Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      margin: const EdgeInsets.only(bottom: 20),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Image.memory(
                          editedImages![index],
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height / 4,
                          fit: BoxFit.cover,
                        ),
                      ));
                },
              ),
          ],
        ),
      ),
    );
  }
}