Flutter圆形图片_flutter 圆形图片

第一种方法利用Container的特性

class HomeContext extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        width:300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.red,//背景颜色
          image: DecorationImage(
            image: NetworkImage(//远程图片
            "https://img.redocn.com/sheying/20200324/shujiashangdeshuji_10870699.jpg"
            ),
            fit: BoxFit.cover//cover 等比例的缩放，直到图片的宽和高都充满整个控件为止，图片可以超出控件的范围，显示不完整。
          ),
          borderRadius: BorderRadius.circular(150)//使整个Container组件变成圆形
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第二种使用ClipOval

class HomeContext extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network("http://imgsrc.baidu.com/forum/w=580/sign=ae2a4e35ba19ebc4c0787691b226cf79/5e13af1c8701a18b50cd631f972f07082938fe80.jpg",
          width: 200,
          height: 200,
          fit: BoxFit.cover)
        ),

      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17