Flutter图片编辑插件images_editor的使用

Flutter图片编辑插件images_editor的使用

Images Editor 允许你在同一画布上编辑多张图片。

准备工作

1. 添加依赖

在 pubspec.yaml 文件中添加最新的版本，并运行 dart pub get：

dependencies:
  images_editor: ^0.0.1

2. 配置Android

将 UCropActivity 添加到你的 AndroidManifest.xml 文件中：

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

3. 添加图片选择器

在 pubspec.yaml 文件中添加 image_picker 作为依赖项，并遵循 安装说明 或使用其他包来选择图片。

示例代码

示例代码位于 /example 文件夹中。以下是一个完整的示例：

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:images_editor/images_editor.dart';
import 'package:images_editor/utils/setting_values.dart';

import 'show_images.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  List<Uint8List> images = [];

  Future<List<File>> pickMultiple() async {
    List<File> files = [];
    final pickedImage = await ImagePicker().pickMultiImage(imageQuality: 50);
    for (var file in pickedImage) {
      files.add(File(file.path));
    }
    return files;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Images Editor",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Images Editor', style: TextStyle(fontSize: 25.0, color: Colors.white),),
          actions: [
            if (images.isNotEmpty)...[
              IconButton(
                onPressed: () {
                  setState(() {
                    images = [];
                  });
                },
                icon: const Icon(Icons.delete),
              ),
            ],
          ],
        ),
        body: Center(
          child: Builder(
            builder: (context) {
              if (images.isNotEmpty) {
                return ShowImages(
                  images: images,
                  onDelete: (index) {
                    setState(() {
                      images.removeAt(index);
                    });
                  },
                );
              } else {
                return ElevatedButton(
                  onPressed: () async {
                    await pickMultiple().then((files) {
                      if (files.isNotEmpty) {
                        Navigator.push(context, MaterialPageRoute(builder: (context) {
                          return ImagesEditor(
                            files: files,
                            onFinish: (images) {
                              Navigator.pop(context);
                              setState(() {
                                this.images = images;
                              });
                            },
                            customText: CustomText(),
                            customColor: CustomColor(),
                            customWidget: CustomWidget(),
                          );
                        }));
                      }
                    });
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                  ),
                  child: const Text('Select images to edit', style: TextStyle(fontSize: 15.0, color: Colors.white)),
                );
              }
            }
          ),
        ),
      ),
    );
  }
}

属性说明

贡献

欢迎来自开源社区的贡献，以使本项目更加完善。无论你是想报告错误、建议新功能或贡献代码，我都非常感谢你的帮助。

错误报告和功能请求

如果遇到错误或有新的功能想法，请在我的 GitHub Issues 页面上打开一个新问题。我会审查并讨论最佳解决方法。

代码贡献

如果你想为本项目贡献代码，请按以下步骤操作：

1. 将仓库 Fork 到你的 GitHub 账户。
2. 在本地机器上克隆你的 Fork 仓库：

git clone https://github.com/Kora3/flutter_images_editor.git