How to Use the Image Cropper Plugin in Flutter

May 10, 2022 | Programming

The Image Cropper plugin is a powerful tool designed to help Flutter developers crop images seamlessly across Android, iOS, and Web platforms. By using this plugin, developers can take advantage of three different native libraries to create a flexible and user-friendly cropping experience.

Introduction

This plugin operates not by manipulating images through Dart code directly, but instead, it utilizes Platform Channels to expose Dart APIs that allow communication with native libraries like uCrop for Android, TOCropViewController for iOS, and Cropper.js for web. This provides a consistent yet uniquely tailored experience for each platform.

How to Install

For Android:

To set up the Image Cropper plugin for Android, you need to add the following UCropActivity in your AndroidManifest.xml file:

Note: From version 1.2.0, migrating your Android project to version 2 embedding is required. You can find details here.

For iOS:

No configuration is required for iOS.

For Web:

Add the following code inside the <head> tag of your web/index.html file:




    ...
    
    
    
    ...

Usage

Required Parameters:

  • sourcePath: The absolute path of an image file.

Optional Parameters:

  • maxWidth: The maximum width of the cropped image.
  • maxHeight: The maximum height of the cropped image.
  • aspectRatio: Controls the aspect ratio of crop bounds. If set, the cropper is locked and the user can’t change the aspect ratio of crop bounds.
  • compressFormat: The format of the resulting image, which can be png or jpg (default is jpg).
  • compressQuality: A number between 0 and 100 to control the quality of image compression (ignored on Web).
  • uiSettings: Controls UI customization on specific platforms (Android, iOS, Web).

Note: The result file is saved in NSTemporaryDirectory on iOS and application Cache directory on Android, and it could be lost later. Ensure to store it in a permanent location if needed.

Customization Options

Each platform offers specific options for UI customization. For instance, for Android, you can adjust settings such as:


AndroidUiSettings(
    toolbarTitle: 'Cropper',
    toolbarColor: Colors.deepOrange,
    toolbarWidgetColor: Colors.white,
    aspectRatioPresets: [
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.square,
        CropAspectRatioPresetCustom(),
    ],
)

This snippet sets the toolbar title, color, and desired aspect ratio presets during the cropping process.

Example Code

Integrating Image Cropper

Here’s an example of how to use the Image Cropper plugin:


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(),
            ],
        ),
        WebUiSettings(
            context: context,
        ),
    ],
);

Troubleshooting

While using the Image Cropper, you may encounter some common issues. Here are a few troubleshooting ideas:

  • If the cropping functionality doesn’t work on one platform, ensure that all required dependencies are properly integrated.
  • Check the paths you are providing as the image source. Invalid paths can lead to errors.
  • For web optimization, ensure your HTML settings for Cropper.js are correctly implemented.
  • If you’re facing UI customization issues, make sure you are using settings that are supported by each platform individually.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

With the Image Cropper plugin, you can enhance your Flutter applications by providing users with a powerful, yet simple image cropping interface. By leveraging native capabilities, you can ensure that your application provides a consistent user experience across all platforms.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox

Let’s Build Success Together