Chrome Extension

Add image with circular shape from corners in Flutter

Container(
    height: 200.0
    child: ClipRRect(
        borderRadius: BorderRadius.circular(15.0),
        child: Image.network(
            "https://placeimg.com/640/480/any",
            fit: BoxFit.cover,
        ),
    ),
),
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

'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?
0 Comments