8

I'm trying to crop a File (imagefile) in flutter. This is what I have:

uncropped image

This is what I would like to get after crop (a png with circle crop)

cropped image

It's important that the file is png, so it doesn't have white borders.

Is there a package that support this?

3

3 Answers 3

16

You can use BoxDecoration to crop the image to be displayed on the Widget.

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.white,
    image: DecorationImage(
      fit: BoxFit.fill,
      image: AssetImage('assets/image.jpeg'),
    ),
  ),
),
3

These simple steps get the required result.

Create a PictureRecorder.

Create a Canvas with your PictureRecorder.

Draw circle in canvas using canvas.drawCircle().

Call endRecording() on the PictureRecorder to get a Picture.

Call toImage() on the Picture.

Convert image toByteData() .

Save image locally using getApplicationDocumentsDirectory() ,only if you want to save.

FULL ANSWER with SOURCE CODE

0

Use this simple image cropping package Which supports cropping the actual file.

You can also refer to my answer on rotating images in files using dart.

1
  • How do you use the package to circle crop without a widget, no UI related? The gif shows circle crop still generates a rectangular file.
    – mrj
    Commented Jan 11, 2021 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.