image_cropper_toolkit #

A reusable Flutter image cropper package with a ready-made crop screen, rotate and flip controls, custom toolbar widgets, and repeat-crop support.

The package keeps the original/full image available after every crop. This lets users crop again later without losing the full image area.

Features #

• Pick any XFile image and open a full-screen crop UI.
• Drag the crop box, resize it from the corners, rotate left, rotate right, and flip.
• Save a cropped PNG file to temporary storage.
• Reopen the cropper with the previous crop rectangle selected.
• Customize save button color, crop line color, labels, padding, and toolbar items.
• Use any toolbar widget: Icon, Image, SVG widget, or a custom widget.
• Replace or hide the default header and bottom toolbar.
• No GetX, no camera dependency, and no SVG dependency.

Installation #

dependencies:
  image_cropper_toolkit: ^0.0.1

import 'package:image_cropper_toolkit/image_cropper_toolkit.dart';

Basic Usage #

Future<void> cropImage(BuildContext context, XFile image) async {
  final CropImageResult? result = await ImageCropperToolkit.cropImage(
    context: context,
    imageItem: CropImageItem.fromXFile(image),
  );

  if (result == null) {
    return;
  }

  final XFile croppedImage = result.croppedImage;
  final XFile fullImage = result.fullImage;
  final Rect cropRectInPixels = result.cropRectInPixels;
}

Pick Image and Crop #

This example uses image_picker in the host app:

import 'package:flutter/material.dart';
import 'package:image_cropper_toolkit/image_cropper_toolkit.dart';
import 'package:image_picker/image_picker.dart';

final ImagePicker picker = ImagePicker();

Future<void> pickAndCrop(BuildContext context) async {
  final XFile? pickedImage = await picker.pickImage(
    source: ImageSource.gallery,
  );

  if (pickedImage == null || !context.mounted) {
    return;
  }

  final CropImageResult? result = await ImageCropperToolkit.cropImage(
    context: context,
    imageItem: CropImageItem.fromXFile(pickedImage),
  );

  if (result == null) {
    return;
  }

  // Use result.croppedImage as the preview/output.
}

Crop Again Without Losing Full Image #

Store fullImage and cropRectInPixels after saving. Pass them back when the user wants to crop again:

Future<void> cropAgain(
  BuildContext context,
  CropImageResult previousResult,
) async {
  final CropImageResult? result = await ImageCropperToolkit.cropImage(
    context: context,
    imageItem: CropImageItem(
      fullImage: previousResult.fullImage,
      previewImage: previousResult.croppedImage,
      cropRectInPixels: previousResult.cropRectInPixels,
    ),
  );

  if (result == null) {
    return;
  }

  // The cropper shows the full image again with the previous crop selected.
}

Customize Colors #

final CropImageResult? result = await ImageCropperToolkit.cropImage(
  context: context,
  imageItem: CropImageItem.fromXFile(image),
  config: const CropImageConfig(
    title: 'Crop Image',
    saveLabel: 'Save',
    backgroundColor: Colors.white,
    canvasBackgroundColor: Color(0xFFF1F1F1),
    saveButtonColor: Color(0xFF2563EB),
    saveButtonForegroundColor: Colors.white,
    cropLineColor: Color(0xFF2563EB),
    textColor: Color(0xFF111827),
    disabledColor: Color(0xFF9CA3AF),
  ),
);

cropLineColor is used for the crop border, grid lines, and corner handles.

Customize Toolbar Widgets and Titles #

Use child for any static widget:

config: const CropImageConfig(
  rotateLeftItem: CropToolbarItemConfig(
    child: Icon(Icons.rotate_left_rounded),
    title: 'Left',
    tooltip: 'Rotate left',
  ),
  rotateRightItem: CropToolbarItemConfig(
    child: Icon(Icons.rotate_right_rounded),
    title: 'Right',
    tooltip: 'Rotate right',
  ),
  flipItem: CropToolbarItemConfig(
    child: Icon(Icons.flip_rounded),
    title: 'Flip',
    tooltip: 'Flip image',
  ),
),

Use builder when the toolbar widget needs disabled/tablet styling:

config: CropImageConfig(
  flipItem: CropToolbarItemConfig(
    title: 'Flip',
    tooltip: 'Flip image',
    builder: (context, isDisabled, isTablet) {
      return Image.asset(
        'assets/flip.png',
        width: isTablet ? 56 : 36,
        height: isTablet ? 56 : 36,
        color: isDisabled ? Colors.grey : Colors.black,
      );
    },
  ),
),

The child or builder can return an Icon, Image, SVG widget from your app, or any custom widget. This package does not depend on any SVG package.

Hide Default Header or Bottom Toolbar #

final CropImageResult? result = await ImageCropperToolkit.cropImage(
  context: context,
  imageItem: CropImageItem.fromXFile(image),
  showHeader: false,
  showBottomBar: false,
);

Custom Header or Bottom Toolbar #

final CropImageResult? result = await ImageCropperToolkit.cropImage(
  context: context,
  imageItem: CropImageItem.fromXFile(image),
  headerBuilder: (context, actions, isProcessing) {
    return AppBar(
      leading: BackButton(onPressed: actions.cancel),
      title: const Text('Adjust image'),
      actions: [
        TextButton(
          onPressed: isProcessing ? null : actions.save,
          child: const Text('Done'),
        ),
      ],
    );
  },
  bottomBarBuilder: (context, actions, isProcessing) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        IconButton(
          onPressed: isProcessing ? null : actions.rotateLeft,
          icon: const Icon(Icons.rotate_left_rounded),
        ),
        IconButton(
          onPressed: isProcessing ? null : actions.rotateRight,
          icon: const Icon(Icons.rotate_right_rounded),
        ),
        IconButton(
          onPressed: isProcessing ? null : actions.flip,
          icon: const Icon(Icons.flip_rounded),
        ),
      ],
    );
  },
);

Result Fields #

Example #

See the example/ app for a complete flow:

• pick image using image_picker
• open the crop screen
• show croppedImage on the home screen
• crop again using fullImage and cropRectInPixels

Repository #

GitHub: https://github.com/umarshyk99/image_cropper_toolkit

Author #

Muhammad Umar Farooq
Email: umarshyk99@gmail.com