Image Editor Plugin for Flutter

You are currently viewing Image Editor Plugin for Flutter
Flutter Image Editor

Image Editor Plugin for Flutter

This image editor plugin is support flip, rotate, crop and many pictures editing features.

Screenshot

Flutter Image Editor
Flutter Image Editor

Platform of support

Android, iOS.

Change Log

This version is a null-safety version.
Please read document for null-safety information in dart or flutter.

Support

  •  flip
  •  crop
  •  rotate
  •  scale
  •  matrix
  •  add text
  •  mix image
  •  merge multi image
  •  draw somethings
    •  draw point
    •  draw line
    •  draw rect
    •  draw circle
    •  draw path
    •  draw Bezier
  •  Gaussian blur

ImageEditor Usage

dependencies:
  image_editor: $latest

About version, please find it from pub.

Import

import 'package:image_editor/image_editor.dart';

Method list:

ImageEditor.editImage();
ImageEditor.editFileImage();
ImageEditor.editFileImageAndGetFile();
ImageEditor.editImageAndGetFile();

Example used alone

Example of extended_image

ImageEditor method params

NameDescription
imagedart.typed_data.Uint8List
filedart.io.File
imageEditorOptionflutter_image_editor.ImageEditorOption

ImageEditorOption

final editorOption = ImageEditorOption();
editorOption.addOption(FlipOption());
editorOption.addOption(ClipOption());
editorOption.addOption(RotateOption());
editorOption.addOption(); // and other option.

editorOption.outputFormat = OutputFormat.png(88);

Option

Flip

FlipOption(horizontal:true, vertical:false);

Clip

ClipOption(x:0, y:0, width:1920, height:1920);

Rotate

RotateOption(degree: 180);

Color Martix

ColorOption();

it’s use 5×4 matrix : https://developer.android.google.cn/reference/android/graphics/ColorMatrix.html Although it is an Android document, the color matrix is also applicable to iOS.

See also  Flex Grid View in Flutter

a, b, c, d, e,
f, g, h, i, j,
k, l, m, n, o,
p, q, r, s, t

ColorOption has some factory constructor to help use change brightness, saturation and contrast. If you have more color matrix, you can open Pull Requests or issue.

Scale

ScaleOption(width,height);

After specifying the width and height, it is not clipped, but stretched to the specified width and height (Does not maintain the aspect ratio of the image).

AddText

All of unit is pixel.

final textOption = AddTextOption();
textOption.addText(
  EditorText(
    offset: Offset(0, 0),
    text: this._controller.text,
    fontSizePx: size,
    color: Colors.red,
    fontName: '', // You must register font before use. If the fontName is empty string, the text will use default system font.
  ),
);

FontManager

See also  Simple Card View with List View Builder using Flutter

Here we can use FontManager to register font.

File fontFile = File(path)//;
final String fontName = await FontManager.registerFont(fontFile);

// the fontName can be use int EditorText.
final textOption = AddTextOption();
textOption.addText(
  EditorText(
    offset: Offset(0, 0),
    text: this._controller.text,
    fontSizePx: size,
    color: Colors.red,
    fontName: fontName, // You must register font before use.
  ),
);

MixImage

void mix(BlendMode blendMode) async {
  final src = await loadFromAsset(R.ASSETS_SRC_PNG);
  final dst = await loadFromAsset(R.ASSETS_DST_PNG);
  final optionGroup = ImageEditorOption();
  optionGroup.outputFormat = OutputFormat.png();
  optionGroup.addOption(
    MixImageOption(
      x: 300,
      y: 300,
      width: 150,
      height: 150,
      target: MemoryImageSource(src),
      blendMode: blendMode,
    ),
  );
  final result =
      await ImageEditor.editImage(image: dst, imageEditorOption: optionGroup);
  this.image = MemoryImage(result);
  setState(() {});
}

BlendMode

Support next BlendMode, other will be ignored. You can also see the document of flutter.

iOSandroid(PorterDuff.Mode)flutter(BlendMode)
kCGBlendModeClearCLEARclear
 SRCsrc
 DSTdst
kCGBlendModeNormalSRC_OVERsrcOver
kCGBlendModeDestinationOverDST_OVERdstOver
kCGBlendModeSourceInSRC_INsrcIn
kCGBlendModeDestinationInDST_INdstIn
kCGBlendModeSourceOutSRC_OUTsrcOut
kCGBlendModeDestinationOverDST_OUTdstOut
kCGBlendModeSourceAtopSRC_ATOPsrcATop
kCGBlendModeDestinationAtopDST_ATOPdstATop
kCGBlendModeXORXORxor
kCGBlendModeDarkenDARKENdarken
kCGBlendModeLightenLIGHTENlighten
kCGBlendModeMultiplyMULTIPLYmultiply
kCGBlendModeScreenSCREENscreen
kCGBlendModeOverlayOVERLAYoverlay

DrawOption

Main class : DrawOption

Support:

  • Line
  • Rect
  • Oval
  • Points
  • Path
    • move
    • line
    • bezier2
    • bezier3
See also  Bungee Music Player in Flutter

Example

Style of paint: DrawPaint, user can set lineWeight,color,style(stroke,fill).

OutputFormat

var outputFormat = OutputFormat.png();
var outputFormat = OutputFormat.jpeg(95);

ImageMerge

    final slideLength = 180.0;
    final option = ImageMergeOption(
      canvasSize: Size(slideLength * count, slideLength * count),
      format: OutputFormat.png(),
    );

    final memory = await loadFromAsset(R.ASSETS_ICON_PNG);
    for (var i = 0; i < count; i++) {
      option.addImage(
        MergeImageConfig(
          image: MemoryImageSource(memory),
          position: ImagePosition(
            Offset(slideLength * i, slideLength * i),
            Size.square(slideLength),
          ),
        ),
      );
    }
    for (var i = 0; i < count; i++) {
      option.addImage(
        MergeImageConfig(
          image: MemoryImageSource(memory),
          position: ImagePosition(
            Offset(
                slideLength * count - slideLength * (i + 1), slideLength * i),
            Size.square(slideLength),
          ),
        ),
      );
    }

    final result = await ImageMerger.mergeToMemory(option: option);
    provider = MemoryImage(result);
    setState(() {});

Credit

This is developed by fluttercandies
Download this project from the below link.
https://github.com/fluttercandies/flutter_image_editor/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/fluttercandies/flutter_image_editor

Spread the love

Leave a Reply