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

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

Answer 1

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,
     ),
 ),

Answer 2

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()
)