top of page

[Flutter/dart] Display the image with rounded corners



Overview


When displaying an image in the app, you may want to round the corners of the original image.

So, this time, I will introduce such a method.



Method


First of all, it will be like this when displayed as it is.


Widget _myImg(){
  return Image.asset('image/sample.jpg',);
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Center(
        child: Container(
          padding: const EdgeInsets.all(32),
          child: _myImg(),
          width: double.infinity,
        ),
      )
    ),
  );
}



Use ClipRRect to round the corners.


Widget _myImg(){
  return ClipRRect(
    child: Image.asset('image/sample.jpg',),
    borderRadius: BorderRadius.all(Radius.circular(10)),
  );
}


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

Kommentare


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