Oxean Image Editor #

A simple yet powerful Flutter image editor that allows users to crop, rotate, flip, and draw on images. This package provides an intuitive interface for image manipulation with support for mobile, desktop, and web platforms.

Features #

Image Cropping: Interactive crop handles with visual guides
Image Rotation: Rotate images left or right by 90 degrees
Image Flipping: Flip images horizontally or vertically
Drawing Tools: Draw on images with customizable brush color and width
Cross-Platform: Works on Android, iOS, Windows, macOS, Linux, and Web

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  oxean_image_editor: ^0.1.0

Then run:

flutter pub get

Usage #

Basic Implementation #

import 'package:flutter/material.dart';
import 'package:oxean_image_editor/oxean_image_editor.dart';
import 'dart:io';

class ImageEditorScreen extends StatefulWidget {
  final File imageFile;

  const ImageEditorScreen({Key? key, required this.imageFile}) : super(key: key);

  @override
  _ImageEditorScreenState createState() => _ImageEditorScreenState();
}

class _ImageEditorScreenState extends State<ImageEditorScreen> {
  late OxeanImageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = OxeanImageController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Editor'),
        actions: [
          IconButton(
            icon: const Icon(Icons.check),
            onPressed: _saveImage,
          ),
        ],
      ),
      body: OxeanImageEditor(
        key: UniqueKey(),
        imageFile: widget.imageFile,
        controller: _controller,
      ),
    );
  }

  Future<void> _saveImage() async {
    final editedImage = await _controller.exportCroppedAndTransformedImage();
    if (editedImage != null) {
      // Handle the edited image (save to file, etc.)
      Navigator.pop(context, editedImage);
    }
  }
}

Platform-Specific Implementation #

Android

For Android, ensure you have the necessary permissions in your AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

For Android 10+ (API level 29+), add:

<application
    android:requestLegacyExternalStorage="true"
    ...

Web Platform

For web applications, use the special constructor that works with in-memory images:

// For web platform
if (kIsWeb) {
  // Load image from assets or network
  final bytes = await getImageBytesFromSource();
  final codec = await ui.instantiateImageCodec(bytes);
  final frameInfo = await codec.getNextFrame();
  final image = frameInfo.image;
  
  // Initialize controller with the image
  final controller = OxeanImageController();
  controller.loadImageFromMemory(image);
  
  // Use the web-specific constructor
  OxeanImageEditor.fromController(
    key: ValueKey('web_editor'),
    controller: controller,
  );
}

Desktop (Windows, macOS, Linux)

For desktop platforms, the package works out of the box. However, for better performance with large images, consider increasing the memory limit in your desktop runner configurations.

Advanced Usage #

Custom Controls

You can customize the editor by creating your own UI controls that interact with the controller:

ElevatedButton(
  onPressed: () => _controller.rotateImageLeft(),
  child: const Text('Rotate Left'),
),
ElevatedButton(
  onPressed: () => _controller.rotateImageRight(),
  child: const Text('Rotate Right'),
),
ElevatedButton(
  onPressed: () => _controller.flipImageHorizontally(),
  child: const Text('Flip Horizontal'),
),

Drawing Options

Enable drawing mode and customize the brush:

// Toggle drawing mode
IconButton(
  icon: Icon(
    Icons.edit,
    color: _controller.pencilModeEnabled ? Colors.blue : null,
  ),
  onPressed: _controller.togglePencilMode,
),

// Set brush color
ColorPicker(
  onColorChanged: (color) => _controller.setPencilColor(color),
  pickerColor: _controller.currentPencilColor,
),

// Set brush width
Slider(
  value: _controller.currentPencilWidth,
  min: 1.0,
  max: 20.0,
  onChanged: _controller.setPencilWidth,
),

API Reference #