Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve Flutter concise and practical picture editor, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Introduction

A simple and practical picture editor, pure dart development. Support: graffiti, rotate & flip, mosaic, add text, and custom ui style.

Function demonstration

Graffiti

Rotate & flip

Mosaic

Add text and delete

Installation

Add dependency

Dependencies: image_editor_dove: ^ latest

Import

How to use import 'package:image_editor/flutter_image_editor.dart';

After obtaining the original image, send it to ImageEditor as follows:

Future toImageEditor (File origin) async {return Navigator.push (context, MaterialPageRoute (builder: (context) {return ImageEditor (originImage: origin, / / empty, support custom storage location (edited image) savePath: customDirectory);}) .then ((result) {if (result is EditorImageResult) {setState (() {_ image = result.newFile;})) }) .catchError ((er) {debugPrint (er);});}

Return the result

/ The editor's result.class EditorImageResult {/ / width final int imgWidth; / / height final int imgHeight; / edited image final File newFile; EditorImageResult (this.imgWidth, this.imgHeight, this.newFile);} expand UI customization

Some buttons, sliders and other widget support customization, and you can customize the ui style by inheriting ImageEditorDelegate:

Class YourUiDelegate extends ImageEditorDelegate {...} ImageEditor.uiDelegate = YourUiDelegate (); 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 createState () {return ImageEditorState ();}} maintains the relative drawing path

In order to get a larger drawing area, the drawing area is not the display area of the picture, which leads to a change in the relative position when rotating. If you need to be relative, you can control the drawing area to be consistent with the picture display area.

The above is all the contents of the article "how to achieve a concise and practical picture editor for Flutter". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.