7

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?

marli
  • 529
  • 10
  • 19
Karel Debedts
  • 5,226
  • 9
  • 30
  • 70

3 Answers3

14

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'),
    ),
  ),
),
Omatt
  • 8,564
  • 2
  • 42
  • 144
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

jazzbpn
  • 6,441
  • 16
  • 63
  • 99
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.

cmd_prompter
  • 1,566
  • 10
  • 16
  • 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 Jan 11 '21 at 09:58