The code for Container to generate rounded corners in a Flutter is as follows:

Container(,
    width:200,
    height:200,
    decoration: BoxDecoration(
        border: Border.all(color:Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    )
)
Copy the code

The renderings are as follows:

When an image is nested, the image does not respect the rounded corners of the Container and directly breaks the Container with a rectangle, resulting in poor display effect. The code is as follows:

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        border:Border.all(color: Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    ),
    child: Image.network(
        "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/16/171818a272f1dbc8~tplv-t2oaga2asx-image.image",
        fit: BoxFit.cover,
    ),
)
Copy the code

Results as follows:

In this case, insert the Child into the ClipRRect and set the cutting radius to the radius of the corner of the Container. The code is as follows:

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        border:Border.all(color: Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    ),
    child: ClipRRect(
        borderRadius: BorderRadius.circular(50),
        child: Image.network(
          "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/16/171818a272f1dbc8~tplv-t2oaga2asx-image.image", fit: BoxFit.cover, ), ), ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/16/1718198a7307f765~tplv-t2oaga2asx-image.image ))Copy the code

Effect picture:

Of course, you can also set the borderRadius four corners of the cut to suit different needs.

borderRadius: BorderRadius.only(topLeft: Radius.circular(50),bottomRight: Radius.circular(50)),
Copy the code

The effect is as follows:

That’s ClipRRect in a nutshell, thanks for watching.