Image Cropper Widget #

A customizable, pure Dart image cropping widget for Flutter. Easily crop images with preset or custom aspect ratios, rotation, flipping, and advanced UI customization including Grid Overlays and Oval/Circle Cropping.

Features #

Flexible Cropping: Supports both free-form and preset aspect ratios.
Crop Shapes: Choose between Rectangle or Oval/Circle crop areas.
Grid Overlay: Built-in Rule of Thirds or custom grid divisions (3x3, 4x4, etc.).
Transformations: Rotate (90° steps or custom angles) and flip (horizontal/vertical) images.
Customizable UI: Fully style the overlay, borders, drag handles (corner/circle), and colors.
High Performance: Built with standard Flutter widgets and custom painters for smooth interaction.
No Native Dependencies: Pure Dart implementation, ensuring compatibility across all platforms.

Installation #

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

dependencies:
  image_cropper_widget: ^1.0.6

Getting Started #

Import the package:

import 'package:image_cropper_widget/image_cropper_widget.dart';

Wrap your image with ImageCropperWidget and provide a controller:

class MyCropScreen extends StatefulWidget {
  @override
  _MyCropScreenState createState() => _MyCropScreenState();
}

class _MyCropScreenState extends State<MyCropScreen> {
  final _controller = ImageCropperController();
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ImageCropperWidget(
            image: AssetImage('assets/my_image.png'),
            controller: _controller,
            aspectRatio: CropperRatio.ratio4_3, // Optional: Force 4:3
            style: CropperStyle(
               corner,
              cropShape: CropShape.oval, // Enable Oval cropping
              showGrid: true,
              gridDivisions: 3, // Rule of Thirds
            ),
          ),
        ),
        ElevatedButton(
          onPressed: () async {
            final Uint8List? croppedBytes = await _controller.crop();
            if (croppedBytes != null) {
              // Use the cropped image...
            }
          },
          child: Text('Crop Image'),
        ),
      ],
    );
  }
}

Advanced Usage #

ImageCropperController #

Use the controller to manipulate the view programmatically:

// Rotate
_controller.rotateLeft();
_controller.rotateRight();
_controller.setRotation(math.pi / 4); // 45 degrees

// Flip
_controller.flipHorizontal();
_controller.flipVertical();

// Change Aspect Ratio
_controller.setAspectRatio(CropperRatio.ratio16_9);
_controller.setAspectRatio(CropperRatio.custom); // Free-form

CropperStyle #

Customize the look and feel using CropperStyle. The image_cropper_view allows you to customize almost every visual aspect:

ImageCropperWidget(
  image: ...,
  style: CropperStyle(
    // Overlay
    overlayColor: Colors.black.withOpacity(0.7),
    overlayPadding: 20.0, // Gap between image and border
    
    // Border
    borderColor: Colors.blueAccent,
    borderWidth: 2.0,
    cropBorderRadius: 12.0, // Rounded corners for rectangle
    
    // Handles
    handlerColor: Colors.blue,
    handlerSize: 14.0,
    handleType: HandleType.corner, // .circle or .corner
    
    // Grid
    showGrid: true,
    gridLineColor: Colors.white54,
    gridDivisions: 3, // 3x3 Grid
    
    // Shape
    cropShape: CropShape.rectangle, // .rectangle or .oval
  ),
)

API Reference #