Four ways to achieve circularity in flutter pictures

In flutter, you can use the Container feature, the backgroundImage of CircleAvatar, the ClipOval component, and the ClipRRect component to achieve rounded corner effects

1. Use the characteristics of Container to cut and achieve rounded corners

 Container(
      width: 100,
      height: 100,
      //超出部分，可裁剪
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
      ),
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        fit: BoxFit.cover,
      ),
    )

2. Use the backgroundImage property of CircleAvatar to achieve rounded corners

 CircleAvatar(
      radius: 50,
      backgroundColor: Colors.white, //未设置背景色，加载图片时会显示红色
      backgroundImage: NetworkImage(
          "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg"),
    )

3. Use the ClipOval component to achieve rounded corners

    ClipOval(
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    )

4. Use the ClipRRect component to achieve rounded corners for pictures

    ClipRRect(//是ClipRRect，不是ClipRect
      borderRadius: BorderRadius.circular(50),
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    )