1.實現(xiàn)圓角頭像

方式一：CircleAvatar

  CircleAvatar buildCircleAvatar() {
    return CircleAvatar(
      radius: 100,
      backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
      child: Container(
        alignment: Alignment(0,.5),
        width: 200,
        height: 200,
        child: Text("兵長利威爾"),
      ),
    );
  }

image.png

方式二：ClipOval

• ClipOval也可以實現(xiàn)圓角頭像，而且通常是在只有頭像時使用

  ClipOval get buildClipOval {
    return ClipOval(
      child: Image.network(
        "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
        width: 200,
        height: 200,
      ),
    );
  }

image.png

方式三：Container+BoxDecoration

 Container buildContainerRadius() {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100),
        image: DecorationImage(
          image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
        ),
      ),
    );
  }

image.png

2.實現(xiàn)圓角圖片

方式一：ClipRRect

• ClipRRect用于實現(xiàn)圓角效果，可以設置圓角的大小。

ClipRRect buildClipRRect() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Image.network(
        "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
        width: 200,
        height: 200,
      ),
    );
  }

image.png

方式二：Container+BoxDecoration

Container buildContainerRadius() {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
          image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
        ),
      ),
    );
  }

image.png

學習內容來自Flutter從入門到實戰(zhàn)