Flutter Image Cropper

This blog will help you implement image picking and image cropping in your flutter application using image_picker and image_cropper packages.

Let’s start with creating a new Flutter project using following command, we will use this project as a simple demo application for demonstrating image picking and image cropping in Flutter.

flutter create image_cropper_demo_flutter

After the Flutter project is successfully created, now let’s add the dependencies in pubspec.yaml file as follows:

dependencies:
  image_cropper: ^5.0.0
  image_picker: ^1.0.1

After adding above dependencies, hit save button and a pub get command will start running automatically, although if no command is executed automatically run the following command on terminal from root of your flutter project.

flutter pub get

Now that we have completed the setup of dependencies in the project, lets set up the platform specific configurations in Android, iOS and web platforms.

Android specific configurations

Add UCropActivity activity in the AndroidManifest.xml file below applications as follows

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

iOS specific configurations

For image_cropper iOS does not need any specific configurations, although for image picker following configurations are required for the dialogs of various permissions to access photos in iOS devices.

Get Marvel Apps’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

• NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor.
• This permission will not be requested if you always pass false for requestFullMetadata, but App Store policy requires including the plist entry.
• NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor.
• NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor.

Web specific configurations

We need to add following code in the <head> tag of our web/index.html file

<head>
  ....
<!-- Croppie -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
  ....
</head>

Lets get started with the implementation part now

File? pickedImage;

// Method for picking up the image from ImageSource, this ImageSource can be camera or gallery.
  Future<File?> pickImage(ImageSource imageType) async {
    File? tempImage;
    try {
      final photo =
          await ImagePicker().pickImage(source: imageType, imageQuality: 100);
      if (photo == null) return null;
      tempImage = File(photo.path);
      tempImage = await _cropImage(imageFile: tempImage);
      setState(() {
        pickedImage = tempImage;
      });
    } catch (error) {
      log(error.toString());
    }
    return tempImage;
  }

// Method for cropping the image file passed through a parameter. 
Future<File?> _cropImage({required File imageFile}) async {
    try {
      CroppedFile? croppedImg = await ImageCropper()
          .cropImage(sourcePath: imageFile.path, compressQuality: 100);
      if (croppedImg == null) {
        return null;
      } else {
        return File(croppedImg.path);
      }
    } catch (e) {
      print(e);
    }
    return null;
  }
 

Now we will be using the above methods in a sample code snippet to demonstrate how to use them in simplest way, above methods can be used as simply as we have done in the following code and can also be integrated in complex state management techniques as well:

// Sample code snippet for using methods for image picking and image cropping that we wrote above.
InkWell(
                      onTap: () async {
                        pickedImage = await pickImage(ImageSource.gallery);
                        setState(() {
                          pickedImage = pickedImage;
                        });
                      },
                      child: Container(
                        height: 90,
                        width: 90,
                        decoration: const BoxDecoration(
                            shape: BoxShape.circle, color: Colors.white),
                        child: pickedImage != null
                            ? Container(
                                height: 90,
                                width: 90,
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    image: DecorationImage(
                                        image: FileImage(
                                          pickedImage!,
                                        ),
                                        fit: BoxFit.cover)),
                              )
                            : Container(
                                alignment: Alignment.center,
                                child: Text(name![0].toUpperCase(),
                                    style: const TextStyle(
                                        color: Colors.red, fontSize: 40))),
                      ),
                    )

In this blog we implemented a simple example for implementing image picker and cropper.

Image Cropper Demo Application

Check out this repository for full source code of demo application having image cropping functionality for it’s profile picture functionality as shown in the example above.

Give this blog a clap if it helped you :)

Happy Reading!!!