top of page

[Flutter/dart]Crop the image into an oval


Overview


When displaying an image on a smartphone app, I think that the original image is often cropped and displayed.

If you want to crop in a circle, you use CircleAvator, but if the original image is vertically long, you may want to crop it in an oval shape. I will explain how to do it.



Method


Use ClipOval.

Widget _myImg(){
  return ClipOval(
    child: Image.asset('image/rect.png',),
  );
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        Center(
          child: _myImg()
        )
      ],
    ),
  );
}

original image:
















this becomes like below.


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

Comments


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