Flutter学习笔记之-圆形头像实现方式_flutter 圆头像的容器代码

Flutter学习笔记之-圆形头像实现方式

开发中如何实现类似圆形图片

• Container+BoxDecoration来实现圆角图像

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          image: DecorationImage(image: NetworkImage("https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg")),
          borderRadius: BorderRadius.circular(50),
        ),
      )
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• Container + CircleAvatar实现圆角头像

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container( // 包裹设置头像大小
      width: 100,
      height: 100,
      child: CircleAvatar(
        backgroundImage: NetworkImage("https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg"),
        child: Container( // 控制name位置
          child: Text("name", style: TextStyle(color: Colors.black),),
          alignment: Alignment(0.0, 2.0),
        ),
      ),
    );
  }
}

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

• ClipOval显示圆角头像

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
          "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg",
        width: 100,
        height: 100,
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• ClipRRect 实现圆角图片

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(50),
      child: Image.network(
        "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg",
        width: 100,
        height: 100,
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13