How To Easily Pick And Crop Image In Flutter [Flutter Easy Code Guide]

In this tutorial, we’ll learn how to properly pick and crop image in Flutter. We’ll be going through a proper code example to practically demonstrate how its done. The complete source code will also be provided in the end.

Introduction: Pick and Crop Image in Flutter

We’ll first pick the image from camera or gallery. After its picked, we’ll click on the button which is specified to crop the image. After its cropped, now the cropped image will be shown on the screen.

Let’s now implement this theory in a practical Flutter code.

Implementing Pick and Crop Image in Flutter (Step by Step)

Follow below steps in order to properly pick and crop that specific image in Flutter.

Step 1: Import Image Picker and Image Cropper Packages

Import these two packages in your project pubspec.yaml file. Click here if you want to learn how to do it.

image_picker: ^0.7.5+1

image_cropper: ^3.0.0

In addition, we need to add a few lines of code in our android manifest xml file. Its important for image cropper package. You can check it here. In our case, the code is:

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

Below is the path for android manfiest xml file.

Android>app>src>main>AndroidManifest.xml

Important Note:

Click here if you face multidex issue while building the app.

Step 2: Pick Image from Camera or Gallery

Now in this part, we’ll specify two code functions. One will take image from camera while other will take image from gallery. See below code:

  ImagePicker imagePicker = ImagePicker();
  File? imageFile;
  File? croppedFile;
  bool cropImage = false;

  pickImageFromCamera() async {
    imageFile = null;
    croppedFile = null;
    cropImage = false;
    var imgData = await imagePicker.getImage(source: ImageSource.camera);
    imageFile = File(imgData!.path);
    setState(() {});
  }

  pickImageFromGallery() async {
    imageFile = null;
    croppedFile = null;
    cropImage = false;
    var imgData = await imagePicker.getImage(source: ImageSource.gallery);
    imageFile = File(imgData!.path);
    setState(() {});
  }

  cropTheImage() async {
    cropImage = true;
    var cropped = (await ImageCropper.platform.cropImage(
      sourcePath: imageFile!.path,
      uiSettings: [
        AndroidUiSettings(lockAspectRatio: false),
      ],
    ));
    croppedFile = File(cropped!.path);
    setState(() {});
  }

The above code has functions which can take image from both camera and gallery. It also has a function that will crop the image.

For demonstration, we’ve taken a picture from camera and cropped it. See below images:

Same code will work for gallery as well. You can try it by clicking gallery material button.

So this is how we can pick and crop image in Flutter with ease. Do share this post with your developer friends.

Also, feel free to ask if you still have any questions regarding how to crop image in Flutter. We’d be very glad to answer them.

The complete source code of how to pick and crop image in Flutter in available in the below section.

Pick and Crop Image In Flutter Complete Source Code

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}

class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {

  ImagePicker imagePicker = ImagePicker();
  File? imageFile;
  File? croppedFile;
  bool cropImage = false;

  pickImageFromCamera() async {
    imageFile = null;
    croppedFile = null;
    cropImage = false;
    var imgData = await imagePicker.getImage(source: ImageSource.camera);
    imageFile = File(imgData!.path);
    setState(() {});
  }

  pickImageFromGallery() async {
    imageFile = null;
    croppedFile = null;
    cropImage = false;
    var imgData = await imagePicker.getImage(source: ImageSource.gallery);
    imageFile = File(imgData!.path);
    setState(() {});
  }

  cropTheImage() async {
    cropImage = true;
    var cropped = (await ImageCropper.platform.cropImage(
      sourcePath: imageFile!.path,
      uiSettings: [
        AndroidUiSettings(lockAspectRatio: false),
      ],
    ));
    croppedFile = File(cropped!.path);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        imageFile == null
            ? SizedBox()
            : Padding(
                padding: EdgeInsets.all(20),
                child: Image.file(
                  cropImage ? croppedFile! : imageFile!,
                ),
              ),
        MaterialButton(
            onPressed: imageFile == null ? null : cropTheImage,
            color: Colors.blue,
            textColor: Colors.white,
            child: Text('Crop')),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            MaterialButton(
                onPressed: pickImageFromCamera,
                color: Colors.blue,
                textColor: Colors.white,
                child: Text('Camera')),
            MaterialButton(
                onPressed: pickImageFromGallery,
                color: Colors.blue,
                textColor: Colors.white,
                child: Text('Gallery')),
          ],
        ),
      ],
    ))));
  }
}

Conclusion

To conclude this tutorial, hope now you’ve a detailed practical knowledge of how to properly crop image in Flutter. We’d be very happy to receive your feedback on this post.

We’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.