Round Corners to images in Image.asset in flutter?

Question

I have three images(images.asset) in a Column wrapped by Row and I want to make the corners of the images to be round. I used shape but it seems like that shape didn't work.

How can I achieve this?

Row(
      children: [
        Expanded(
          child: Column(
            children: <Widget>[

              Image.asset(
                'assets/cat.jpg',width: 110.0, height: 110.0,
              ),
              shape:Rec
              Text(
                'Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Image.asset('assets/cat.jpg',width: 110.0, height: 110.0,),
              Text(
                'Buy Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Image.asset('assets/cat.jpg',width: 110.0, height: 110.0,),
              Text(
                'Prizes',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
      ],
    ),

Expected Result

To have rounded corners to images.
To handle a click event.

are you looking forward to show images in circle? Or just images with rounded corners? — Vicky Salunkhe, Jun 24 '19 at 04:49
Then `ClipRRect` should do the work. Please state your exact requirement. Ellaborate if necessary as there are answers and you have also marked as accepted. — Vicky Salunkhe, Jun 24 '19 at 06:50
I am not able to explain actually and I accepted the answer because it actually does something but it is not as I wanted. You can look at this site "http://www.corelangs.com/css/box/round.html" for refernce that what i wnt — Prianca, Jun 24 '19 at 09:58
I don't know how to draw here yeah but it exactly the same as you can see it in here the SO profile picture, it is what I want exactly these rounded corners. Is there any platform where I can upload ss and You will be able to see — Prianca, Jun 25 '19 at 04:25
https://drive.google.com/file/d/1F924NEBFAjGqa0L3U9JcFMPlQGLL0zsR/view?usp=sharing — Prianca, Jun 25 '19 at 04:57
The images in it having border is what I want and I am getting this: https://drive.google.com/file/d/13kWSAUe4h2ipvUgCPK5IslyO2WNWt7pQ/view?usp=sharing — Prianca, Jun 25 '19 at 04:59
I am answering your question do let me know if it works, and if it helps do mark it as your desired solution — Vicky Salunkhe, Jun 25 '19 at 07:18
Does this answer your question? [How to do Rounded Corners Image in Flutter](https://stackoverflow.com/questions/51513429/how-to-do-rounded-corners-image-in-flutter) — starball, Aug 25 '23 at 05:20

Vicky Salunkhe · Accepted Answer · 2020-09-23T08:30:49.377

22

Cover your image widget like this.

With ClipRRect widget and include fit:BoxFit.fill so that your image could expand to the height and width you have passed.

It will give you your desired output as you shown in the image.

 ClipRRect(
     borderRadius: BorderRadius.circular(8.0),
     child: Image.asset(
       'assets/cat.jpg',
        width: 110.0,
        height: 110.0,
        fit: BoxFit.fill,
     ),
 ),

edited Sep 23 '20 at 08:30

answered Jun 25 '19 at 07:22

Vicky Salunkhe

9,869
6
42
59

score 11 · Answer 2 · answered Jun 29 '19 at 11:43

There are many ways of doing it.

(i). Use CircleAvatar (recommended)

CircleAvatar(
  backgroundImage: AssetImage('assets/cat.jpg'),
  radius: 50,
)

(ii). Use ClipOval

ClipOval(
  child: Image.asset(
    'assets/cat.jpg',
    fit: BoxFit.cover,
  ),
)

(iii) Use ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(50),
  child: Image.asset(
    'assets/cat.jpg',
    fit: BoxFit.cover,
  ),
)

Answering your 2nd question, if you need to handle click on any image, you can wrap any of the above in GestureDetector and use onTap property.

GestureDetector(
  onTap: () {},
  child: AnyAboveWidget()
)

score 4 · Answer 3 · answered Jun 22 '19 at 10:30

4

Use ClipRRect

ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child:  Image.asset(
        'assets/cat.jpg',width: 110.0, height: 110.0,
      ),
    );

answered Jun 22 '19 at 10:30

Murat Aslan

1,446
9
21

This helped but I want something like what we get when we apply this: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0)), Still there is sharpness any idea ? – Prianca Jun 22 '19 at 11:52

Vithani Ravi · Answer 4 · 2019-07-15T10:59:58.400

you can use ClipRRect enter link to more detail

new ClipRRect(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(4.0),
                  topLeft: Radius.circular(4.0)),
              child: Image.asset(
                "images/filter_white.png",
                color: AppColor.appColor,
                height: 20.0,
                width: 20.0,
              ),
            )

Usama Karim · Answer 5 · 2022-01-26T17:17:13.367

The following code is dynamic for any image you use. It means no matter which image you use it will not look weird.

  CircleAvatar(
        backgroundColor: cWhite,
        radius: 50,
        child: ClipOval(
          child: Image.file(
            image,
            fit: BoxFit.cover,
            width: 100, // x2 (twice) the radius of CircleAvatar
            height: 100, // x2 (twice) the radius of CircleAvatar
            ),
          ),
        ),

score 0 · Answer 6 · answered Aug 24 '23 at 09:49

Round Corners to images:

There are several widgets in flutter create round corner image.

Container:

Container(
  width: 120,
  height: 120,
  clipBehavior: Clip.antiAlias,
  decoration:  BoxDecoration(
    borderRadius: BorderRadius.circular(15) // Adjust the radius as needed
  ),
  child: Image.asset(
    ''assets/cat.jpg',
    fit: BoxFit.cover,
  ),
),

ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  child: Image.asset(
    'assets/images/bg_login.jpg',
    fit: BoxFit.cover,
    width: 120,
    height: 120,
  ),
)

Card:

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  ),
  clipBehavior: Clip.antiAlias,
  elevation: 5.0,
  child: Image.asset(
    'assets/images/bg_login.jpg',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
)

Physical Model:

PhysicalModel(
    color: Colors.transparent,
    borderRadius: BorderRadius.circular(10),
    clipBehavior: Clip.antiAlias,
    elevation: 5.0,
    child: Image.asset(
     'assets/images/bg_login.jpg',
      width: 120,
      height: 120,
      fit: BoxFit.cover,
    ))

Round Corners to images in Image.asset in flutter?

6 Answers6