Flutter自定义图片编辑插件custom_image_editor的使用

Flutter自定义图片编辑插件custom_image_editor的使用

custom_image_editor 是一个基于 Flutter 的强大图片编辑插件，支持裁剪、绘画、添加文本和旋转图片等功能。

特性

• 裁剪
• 添加文本，可选择加粗文本和选择文本颜色
• 绘画，可选择线条的颜色
• 旋转，每次旋转90度顺时针

自定义图片编辑器展示

裁剪

旋转

绘画

添加文本

如何使用此插件

为了开始编辑图片，可以使用以下代码：

Future<void> editImage(File imageFile) async {
    // 导航到图片编辑器
    final fileResult = await Navigator.push(context, MaterialPageRoute(builder: (context) {
        return EditImageComponent(imageFile: imageFile);
    }));
    if (fileResult != null && fileResult is FinishedImageData) {
        String file = fileResult.file.path; // 新更新图片的文件路径
        imageLink.value = file;
        // 获取新更新图片的大小
        width.value = fileResult.size.width;
        height.value = fileResult.size.height;
    }
}

完整示例Demo

import 'dart:io';
import 'package:custom_image_editor/EditImage.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  ValueNotifier<String> imageLink = ValueNotifier('');
  ImagePicker _picker = ImagePicker();
  ValueNotifier<double> width = ValueNotifier(200);
  ValueNotifier<double> height = ValueNotifier(350);

  Future<void> pickImage() async {
    try {
      if (imageLink.value.isEmpty) {
        final XFile? pickedFile = await _picker.pickImage(
          source: ImageSource.gallery,
          imageQuality: 100,
          maxWidth: 1000,
          maxHeight: 1000,
        );
        if (pickedFile != null) {
          String imageUri = pickedFile.path;
          imageLink.value = imageUri;
        }
      }
    } catch (e) {}
  }

  Future<void> editImage(File imageFile) async {
    final fileResult = await Navigator.push(context, MaterialPageRoute(builder: (context) {
      return EditImageComponent(imageFile: imageFile);
    }));
    if (fileResult != null && fileResult is FinishedImageData) {
      String file = fileResult.file.path;
      imageLink.value = file;
      // 获取新更新图片的大小
      width.value = fileResult.size.width;
      height.value = fileResult.size.height;
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ValueListenableBuilder<String>(
              valueListenable: imageLink,
              builder: (BuildContext context, String imageLinkStr, Widget? child) {
                return imageLinkStr.isEmpty
                    ? ElevatedButton(
                        onPressed: () => pickImage(),
                        child: Text('Pick Image'))
                    : Stack(
                        children: [
                          ValueListenableBuilder<double>(
                            valueListenable: width,
                            builder: (BuildContext context, double width, Widget? child) {
                              return ValueListenableBuilder<double>(
                                valueListenable: height,
                                builder: (BuildContext context, double height, Widget? child) {
                                  return Image.file(File(imageLinkStr), fit: BoxFit.cover, width: width, height: height);
                                },
                              );
                            },
                          ),
                          Positioned(
                            top: 5,
                            right: 0.03 * getScreenWidth(),
                            child: Container(
                              width: 0.075 * getScreenWidth(),
                              height: 0.075 * getScreenWidth(),
                              decoration: BoxDecoration(
                                color: Colors.black,
                                shape: BoxShape.circle,
                              ),
                              child: GestureDetector(
                                onTap: () {
                                  imageLink.value = '';
                                  width.value = 200;
                                  height.value = 350;
                                },
                                child: Icon(Icons.delete, size: 25, color: Colors.white),
                              ),
                            ),
                          ),
                          Positioned(
                            top: 5,
                            right: 0.13 * getScreenWidth(),
                            child: Container(
                              width: 0.075 * getScreenWidth(),
                              height: 0.075 * getScreenWidth(),
                              decoration: BoxDecoration(
                                color: Colors.black,
                                shape: BoxShape.circle,
                              ),
                              child: GestureDetector(
                                onTap: () => editImage(File(imageLinkStr)),
                                child: Icon(Icons.edit, size: 25, color: Colors.white),
                              ),
                            ),
                          ),
                        ],
                      ),
                  ];
              },
            ),
          ],
        ),
      ),
    );
  }
}