introduce

A simple and useful image editor, pure DART development. Support: Doodle, rotate & flip, Mosaic, add text, and custom UI style.

Function demonstration

graffiti

Rotate & flip

Mosaic

Add text and delete

The installation

Add the dependent

dependencies:
  image_editor_dove: ^latest
Copy the code

import

import 'package:image_editor/flutter_image_editor.dart';
Copy the code

Method of use

Once you have the original image, pass it to the ImageEditor as follows:

Future<void> toImageEditor(File origin) async { return Navigator.push(context, MaterialPageRoute(builder: (context) {return ImageEditor(originImage: Origin, // null, support custom storage location (edited image) savePath: customDirectory); })).then((result) { if (result is EditorImageResult) { setState(() { _image = result.newFile; }); } }).catchError((er) { debugPrint(er); }); }Copy the code

Returns the result

///The editor's result. class EditorImageResult {/// width final int imgWidth; ImgHeight final int imgHeight; /// final File newFile; EditorImageResult(this.imgWidth, this.imgHeight, this.newFile); }Copy the code

expand

The UI customization

Some buttons, sliders, and other widgets support customization, which can be customized by inheriting ImageEditorDelegate:

class YourUiDelegate extends ImageEditorDelegate{
    ...
}

ImageEditor.uiDelegate = YourUiDelegate();

Copy the code
class ImageEditor extends StatefulWidget { const ImageEditor({Key? key, required this.originImage, this.savePath}) : super(key: key); . ///[uiDelegate] is determine the editor's ui style. ///You can extends [ImageEditorDelegate] and custome it by youself. static ImageEditorDelegate uiDelegate = DefaultImageEditorDelegate(); @override State<StatefulWidget> createState() { return ImageEditorState(); }}Copy the code

Keep drawing paths relative

In order to obtain a larger drawing area, so the drawing area is not the image display area, which leads to the rotation, the relative position will change. If you want to keep it relative, you can keep the drawing area consistent with the image display area.

References and other articles

address

Github repository address: image_editor_dove

Plugin address: image_editor_dove

Refer to the plugin

signature | Flutter Package (flutter-io.cn)

Other articles

Flutter_hybird_webview practical technique sharing for cross-process rendering

Flutter – the Touch event distribution process of native View

What does the Native layer do when Flutter launches on Android?

Flutter — Realize progressive card switching for NetEase Cloud Music

Flutter imitates flush list of self-selected stocks