Round Corners to images in Image.asset in flutter?

user_10866639 0
Viewed 23928

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.
dart flutter
5 Answers

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

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

Use ClipRRect

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

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

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