flutter 實現圓角頭像的2種方法

圓角頭像在開發中應用太廣泛了，我總結了2種實現方法，分享給你們

 

方法一：

使用Container組件的decoration能夠實現

Container(
  width: 40,
  height: 40,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    image: DecorationImage(
      image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561011314262&di=29253749380f34583bbcae1a614d6f6e&imgtype=0&src=http%3A%2F%2Fimg3.mukewang.com%2F5c18cf540001ac8206000338.jpg",)
    )
  ),
),

 其中borderRadius的值設爲寬或高的一半

方法二：使用ClipRRect組件

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network(
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561011314262&di=29253749380f34583bbcae1a614d6f6e&imgtype=0&src=http%3A%2F%2Fimg3.mukewang.com%2F5c18cf540001ac8206000338.jpg", 
    width: 40, 
    height: 40,
  ),
),