flutter_image_cropper

If you use customDialogBuilder or customRouteBuilder in WebUiSettings, you must manually handle the initialization and the cropping trigger to ensure the plugin receives the result.

1. Initialization: You must call the provided initCropper() function inside your widget's initState.
2. Cropping: You must call the provided crop() function and return the result to the plugin using Navigator.of(context).pop(result).

class CropperDialog extends StatefulWidget {
  final dynamic cropper;
  final VoidCallback initCropper;
  final Future<dynamic> Function() crop;
  // ... other params

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

class _CropperDialogState extends State<CropperDialog> {
  @override
  void initState() {
    super.initState();
    // IMPORTANT: must call this function to initialize the Cropper object
    widget.initCropper();
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Column(
        children: [
          widget.cropper, // The cropper widget
          TextButton(
            onPressed: () async {
              // IMPORTANT: call crop() and pop the result to the plugin
              final result = await widget.crop();
              Navigator.of(context).pop(result);
            },
            child: Text('Crop'),
          ),
        ],
      ),
    );
  }
}

// Usage in WebUiSettings
WebUiSettings(
  customDialogBuilder: (cropper, initCropper, crop, rotate, scale) {
    return CropperDialog(
      cropper: cropper,
      initCropper: initCropper,
      crop: crop,
      rotate: rotate,
      scale: scale,
    );
  },
)

  class CropperDialog extends StatefulWidget {
    ...
  }  

  class _CropperDialogState extends State<CropperDialog> {
    @override
    void initState() {
      super.initState();
      /// IMPORTANT: must to call this function
      widget.initCropper();
    }

    @override
    Widget build(BuildContext context) {
      Dialog(
        child: Column(
          children: [
            ...
            cropper,
            ...
            TextButton(
              onPressed: () async {
                /// IMPORTANT: to call crop() function and return
                /// result data to plugin, for example:
                final result = await crop();
                Navigator.of(context).pop(result);
              },
              child: Text('Crop'),
            )
          ]
        ),
      );
    }
  }

  WebUiSettings(
    ...
    customDialogBuilder: (cropper, initCropper, crop, rotate, scale) {
      return CropperDialog(
        cropper: cropper,
        initCropper: initCropper,
        crop: crop,
        rotate: rotate,
        scale: scale,
      );
    },
    ...
  )

To crop an image, call cropImage on an instance of ImageCropper. You must provide a sourcePath (the path to the image file) and a list of uiSettings to configure the cropping interface for each platform (Android, iOS, and Web). The method returns a CroppedFile containing the resulting image.

import 'package:image_cropper/image_cropper.dart';

CroppedFile croppedFile = await ImageCropper().cropImage(
    sourcePath: imageFile.path,
    uiSettings: [
      AndroidUiSettings(
        toolbarTitle: 'Cropper',
        toolbarColor: Colors.deepOrange,
        toolbarWidgetColor: Colors.white,
        aspectRatioPresets: [
          CropAspectRatioPreset.original,
          CropAspectRatioPreset.square,
          CropAspectRatioPresetCustom(),
        ],
      ),
      IOSUiSettings(
        title: 'Cropper',
        aspectRatioPresets: [
          CropAspectRatioPreset.original,
          CropAspectRatioPreset.square,
          CropAspectRatioPresetCustom(), // IMPORTANT: iOS supports only one custom aspect ratio in preset list
        ],
      ),
      WebUiSettings(
        context: context,
      ),
    ],
  );

class CropAspectRatioPresetCustom implements CropAspectRatioPresetData {
  @override
  (int, int)? get data => (2, 3);

  @override
  String get name => '2x3 (customized)';
}

The WebUiSettings object allows you to customize the appearance and behavior of the cropper when running in a web browser.

Key configuration areas include:

• Presentation Style: Use presentStyle to choose between WebPresentStyle.page (navigates to a new page) or WebPresentStyle.dialog (shows a modal dialog).
• Sizing: Set the size property to define the dimensions of the cropper container.
• UI Customization: Customize translations, themeData, and barrierColor (for dialog mode).
• Custom Builders: You can override the default UI by providing customRouteBuilder (for page mode) or customDialogBuilder (for dialog mode). These builders receive the following callbacks:
  • initializer: A function to initialize the cropper.
  • doCrop: A function to trigger the cropping process.
  • doRotate: A function to rotate the image.
  • doScale: A function to scale the image.

To customize the iOS user interface (which uses the TOCropViewController library), use the IOUiSettings helper class.

Key customization options include:

• Rect/Initial State: minimumAspectRatio, rectX, rectY, rectWidth, and rectHeight.
• Dialog/Navigation: showActivitySheetOnDone, showCancelConfirmationDialog, embedInNavigationController, and hidesNavigationBar.
• Toolbar Buttons: rotateClockwiseButtonHidden, rotateButtonsHidden, resetButtonHidden, aspectRatioPickerButtonHidden, and resetAspectRatioEnabled.
• Aspect Ratio: aspectRatioLockDimensionSwapEnabled (swaps dimensions based on orientation) and aspectRatioLockEnabled.
• Text/Style: title, doneButtonTitle, cancelButtonTitle, cropStyle (rectangle or circle), and aspectRatioPresets.

// Example of IOUiSettings properties
IOUiSettings(
  title: 'iOS Cropper',
  aspectRatioLockEnabled: true,
  cropStyle: CropStyle.rectangle,
  // ... other properties
)