Flutter: rounded corners for images

There are different possibilities to create a rounded corner of images:

BoxDecoration

To create a rounded corner image in Flutter, you can use the Container widget and set the decoration property to a BoxDecoration with a borderRadius that defines the rounded corners. Here’s an example:

Container(
  height: 100.0,
  width: 100.0,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.cover, 
      image: NetworkImage('https://example.com/image.jpg'),
    ),
    borderRadius: BorderRadius.circular(10.0),
  ),
),

In this example, the width and height properties of the Container define the size of the image, the DecorationImage property defines the image source and how it should be scaled to fit the container and the borderRadius property is used to create the rounded corners with a Radius.circular(10).

ClipRRect

You can also use ClipRRect widget to create rounded corner Image in flutter.

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.network(
    'https://example.com/image.jpg',
    height: 100.0,
    width: 100.0,
    fit: BoxFit.cover,
  ),
),

You can adjust the radius value as per your need.

Photo by Chaitanya Tvs on Unsplash