top of page

[Flutter/dart] Cut out the part off the center of the image


Overview


If you want to crop an image in a circle with Flutter, I think you use Circle Avator.

CircleAvator determines the radius and center of the circle to fit the entire image, but you may want to crop it differently.


For example, when cropping a person's photo, it is easier to see only the face part than to reduce it so that the whole body fits in.

Therefore, this time, I will introduce a method to cut out the part off the center of the image like this.


Widget _myImg(){

  return CircleAvatar(
    child: Image.asset('image/person.png',),
    backgroundColor: Colors.transparent,
    radius: 50,
  );
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        const SizedBox(height: 32,),
        Center(
          child: _myImg()
        )
      ],
    ),
  );
}
CircleAvator determines the radius and center to include the entire image

Method


With ClipOval, you can freely decide the position and size of the cutout.


First, create a class that extends CustomClipper (here, MyClipper).

class MyClipper extends CustomClipper<Rect>{

  MyClipper();

  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
      center: Offset(size.width/2, size.width/2), 
      radius: size.width/2
    );
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    return false;
  }

}

When extending CustomClipper, you need to implement getClip () and shouldReclip ().


You specify whether the image needs to be cropped again shouldReclip (). I set false always here.


getClip () is a method that specifies the cropping method. The argument size is the size of the original image, and the return value of this method will crop the image.

This time, the vertically long rectangular image is cut out with a circle inscribed on the left side, right side, and top side, so the return value is as shown above.



Then specify an instance of MyClipper in ClipOval's clipper property.

This will crop the image.

Widget _myImg(){

  return ClipOval(
    clipper: MyClipper(),
    child: Image.asset('image/person.png',),
  );
}



Lastly


The most important point is to determine the cropping range with getClip. If it is an inscribed circle, I think it can be implemented without much effort.


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

댓글


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page