flutter

Add image with circular shape from corners in Flutter

To make an image round from corners ClipRRect Widget can be used in Flutter. You can provide borderRadius property to it to clip the image in circular shape.

Container(
    height: 200.0,
    child: ClipRRect(
        borderRadius: BorderRadius.circular(15.0),
        child: Image.network(
            "https://placeimg.com/640/480/any",
            fit: BoxFit.cover,
        ),
    ),
),

'ClipRRect' widget can be used in Flutter to add a rounded or circular shape image in your mobile app. In the code snippet, we have added network image as 'ClipRRect' child and provide a '15.0' radius to it. This will make all corners rounded but if you only want corners to be rounded from specific sides you can use the following code.

Container(
    height: 200.0,
    child: ClipRRect(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15.0),
            topRight: Radius.circular(15.0),
        ),
        child: Image.network(
            "https://placeimg.com/640/480/any",
            fit: BoxFit.cover,
        ),
    ),
),

The above code will make the corners rounded from the top only as we have added the property for topLeft and topRight only. You can also provide values to 'bottomLeft' and 'bottomRight' properties if you want to make corners rounded with a specific radius.

Was this helpful?