ProImageEditor Documentation

ProImageEditor is a comprehensive Flutter widget for image manipulation. Key capabilities include:

Editor Modules

• Paint Editor: Freehand drawing, shapes (circles, arrows), and censoring (blur/pixelation).
• Text Editor: Full text styling and customization.
• Crop & Rotate: Flipping, rotating, and cropping.
• Tune Adjustments: Brightness, contrast, saturation, etc.
• Filter Editor: Predefined and custom filters.
• Blur Editor: Localized blurring.
• Emoji & Sticker Editors: Inserting emojis and custom image stickers.

Core Capabilities

• Multi-threading: Uses Isolates (native) or Web Workers (web) for background processing.
• Non-destructive Editing: Undo/Redo support.
• Layer Management: Reorder layers, interactive selection, and hit detection for paint layers.
• Advanced UX: Zoom support, helper lines for alignment, multiselect, and enhanced desktop mouse/scaling support.

To integrate the editor, use the ProImageEditor widget. The package provides several factory constructors for different input types, such as .network(). You can handle the completed edit via the callbacks parameter using ProImageEditorCallbacks.

By default, the edited image bytes are returned in JPG format. If you use await inside onImageEditingComplete, the loading dialog will remain visible until your processing (e.g., uploading to a server) is finished.

import 'package:pro_image_editor/pro_image_editor.dart';

@override
Widget build(BuildContext context) {
  return ProImageEditor.network(
    'https://picsum.photos/id/237/2000',
    callbacks: ProImageEditorCallbacks(
      onImageEditingComplete: (Uint8List bytes) async {
        /*
          Your code to process the edited image, such as uploading it to your server.
        */
        Navigator.pop(context);
      },
    ),
  );
}

When enableFakeHero is set to true in CropRotateEditorInitConfigs, you must manually manage the visibility of the fake hero widget during navigation transitions to ensure a smooth UI.

To hide the fake hero, listen to the AnimationStatus of your PageRouteBuilder and call hideFakeHero() on the editor's state when the animation status is AnimationStatus.completed.

return Navigator.push<T?>(
  context,
  PageRouteBuilder(
    opaque: false,
    transitionDuration: duration,
    reverseTransitionDuration: duration,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      void animationStatusListener(AnimationStatus status) {
        if (status == AnimationStatus.completed) {
          if (cropRotateEditor.currentState != null) {
            /// Remove the fake hero like that
            cropRotateEditor.currentState!.hideFakeHero();
          }
        } else if (status == AnimationStatus.dismissed) {
          animation.removeStatusListener(animationStatusListener);
        }
      }
      animation.addStatusListener(animationStatusListener);
      return page;
    },
    pageBuilder: (context, animation, secondaryAnimation) => page,
  ),
);

The Runner.rc file is a Microsoft Visual C++ resource script used to define the Windows-specific metadata for the application. Developers can modify this file to change the application's icon, version information, and descriptive properties (like Company Name and Product Name) that appear in Windows File Explorer.

// Icon configuration
IDI_APP_ICON            ICON                    "resources\\app_icon.ico"

// Version and Metadata configuration
VS_VERSION_INFO VERSIONINFO
 FILEVERSION VERSION_AS_NUMBER
 PRODUCTVERSION VERSION_AS_NUMBER
 // ...
 BEGIN
    BLOCK "StringFileInfo"
    BEGIN
        BLOCK "040904e4"
        BEGIN
            VALUE "CompanyName", "com.example" "\0"
            VALUE "FileDescription", "example" "\0"
            VALUE "FileVersion", VERSION_AS_STRING "\0"
            VALUE "InternalName", "example" "\0"
            VALUE "LegalCopyright", "Copyright (C) 2024 com.example. All rights reserved." "\0"
            VALUE "ProductName", "example" "\0"
            VALUE "ProductVersion", VERSION_AS_STRING "\0"
        END
    END
END

Use the ProcessorConfigs class to manage how background processors (isolates/threads) are utilized during image generation tasks. This allows you to control concurrency, the number of background workers, and initialization timing to balance performance and UI responsiveness.

Configuration Options

Constraints

• numberOfBackgroundProcessors must be > 0.
• maxConcurrency must be > 0.

const configs = ProcessorConfigs(
  numberOfBackgroundProcessors: 4,
  maxConcurrency: 2,
  processorMode: ProcessorMode.limit,
  initializationDelay: Duration(milliseconds: 300),
);

Use CropRotateEditorInitConfigs to initialize the Crop and Rotate Editor module. This class allows you to define transformation settings, themes, and lifecycle callbacks.

Key configuration options include:

• onDone: A callback triggered when the user completes the editing process. It provides the final TransformConfigs, a fitToScreenFactor, and optional ImageInfos.
• enablePopWhenDone: A boolean (defaults to true) that determines if the editor widget should automatically pop from the navigation stack when editing is finished.
• enableFakeHero: A boolean (defaults to false) used to enable a 'fake' hero widget for transition animations. If enabled, you are responsible for manually hiding the fake hero using cropRotateEditor.currentState!.hideFakeHero() once the transition completes.

```dart
CropRotateEditorInitConfigs(
  configs: myConfigs,
  transformConfigs: myTransformConfigs,
  layers: myLayers,
  callbacks: myCallbacks,
  theme: myTheme,
  onDone: (transformations, fitToScreenFactor, imageInfos) {
    // Handle the done action
  },
)```