测试图片：

var imgUrl ="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1604650283&di=54b94bcbc1e70d6cbd16c65bbd563144&src=http://pic.51yuansu.com/pic/cover/00/23/77/57e1d8b92edba_610.jpg";

一、CircleAvatar

从widget名称也可以看出来是实现圆形头像的组件。

const CircleAvatar({Key key,this.child,this.backgroundColor,this.backgroundImage,this.onBackgroundImageError,this.foregroundColor,this.radius,this.minRadius,this.maxRadius,})

backgroundImage 为 ImageProvider,通过 AssetImage（本地图片）或 NetworkImage（网络图片）获取图片之后在背景显示，从而形成圆形头像

还有一个child,如果添加child 之后会覆盖显示到圆形图片之上。

 CircleAvatar(backgroundImage: AssetImage("images/default_img43.webp",),),Padding(padding: EdgeInsets.only(left: 55),child: SizedBox(child: CircleAvatar(radius: 15,backgroundColor: Colors.red,backgroundImage: AssetImage("images/default_img43.webp"),child: Text("Test", style: styleBlack54Size16),),width: 50,height: 50,),),Padding(padding: EdgeInsets.only(left: 120,),child: SizedBox(child: CircleAvatar(backgroundImage: NetworkImage(imgUrl),),width: 55,height: 55,),),

效果图

二、Container + 内部属性 DecorationImage

和 CircleAvatar 类似，也是通过背景加载图片形式显示图片

Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(100),image: DecorationImage(fit: BoxFit.cover,image: NetworkImage(imgUrl),),),width: 40,height: 40,)

注意：DecorationImage中 fit: BoxFit.cover 属性要设置，没有这个属性设置图片如果不是长款等比，就不完全是圆形展示

DecorationImage 中的image也为ImageProvider，ImageProvider获取通过AssetImage（本地图片）或 NetworkImage（网络图片）得到

三、ClipOval +Image

 Padding(padding: EdgeInsets.only(left: 180,),child: ClipOval(child: Image.asset("images/default_img43.webp",width: 55,height: 55,),),),Padding(padding: EdgeInsets.only(left: 240,),child: ClipOval(child: Image.network(imgUrl,width: 50, height: 50, fit: BoxFit.cover),),),

ClipOval 属性child 通过 Image.asset 或者 Image.network添加圆形图片，fit 模式也要设置为 fit: BoxFit.cover

四、ClipRRect

从单词意思是圆角矩形，可以通过计算圆角直径和宽度相同实现圆形展示，实际和方法二实现类似，都是通过控制圆角实现圆形效果

ClipRRect(borderRadius: BorderRadius.circular(30),child: Image.network(imgUrl,width: 60, height: 60, fit: BoxFit.cover))

圆角图片方案

上面四种圆形图片显示实现中方法二和方法四是通过borderRadius 值 圆角大小实现圆形的，那么圆角可以根据UI大小去设定即实现所要效果

  Padding(padding: EdgeInsets.only(left: 300, top: 10),child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),image: DecorationImage(fit: BoxFit.cover,image: NetworkImage(imgUrl),),),width: 50,height: 50,),),Padding(padding: EdgeInsets.only(left: 380, top: 10),child: ClipRRect(borderRadius: BorderRadius.circular(10),child: Image.network(imgUrl,width: 60, height: 60, fit: BoxFit.cover)),),

效果如下：

Flutter 圆形（头像）图片的 4种实现相关推荐

html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...
Android ImageView圆形头像图片完全解析
转载http://m.oschina.net/blog/321024 Android ImageView圆形头像图片完全解析我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ.用户在用QQ ...
android 图片分析,Android ImageView圆形头像图片完全解析
我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ.用户在用QQ更换头像的时候,上传的图片都是矩形的,但显示的时候确是圆形的. 原理:先在canvas上面画一个圆形,参照圆形的起点坐标.半径, ...
Flutter实现头像效果的两种方式
(一)效果图 (二)实现方式,两种第一种(基础版):实现要点:利用Container里面的BoxDecoration 网络加载图片 NetworkImage import 'package:flut ...
【转】Android ImageView圆形头像
Android ImageView圆形头像图片完全解析我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ.用户在用QQ更换头像的时候,上传的图片都是矩形的,但显示的时候确是圆形的. 原理: ...
卡通头像图片怎么做，卡通头像图片制作方法分享！
卡通头像图片怎么做,卡通头像图片是一种以卡通形式为基础的人物头像图片,通常用于社交媒体.聊天应用程序和个人资料等,这些图片通常具有明亮的颜色.夸张的表情和图像,以及简单的线条和形状,卡通头像图片可以是 ...
Flutter的圆形头像四种简单用法
文章目录一.ClipOval 二.CircleAvatar 三.ClipRRect 四.Container+BoxDecoration 一.ClipOval 该方式属于绘图功能,只能简单的显示圆形头 ...
Flutter实现圆形头像的几种方法
Flutter的ClipRect的使用场景 ClipRect可以用来裁剪容器内部的子元素,以避免超出容器的范围而溢出.常见的应用场景有: 将一个图像裁剪成不同形状,如圆形.方形.椭圆等: 将一个复杂的 ...
Flutter 图片、圆形头像、圆角图片....各种形状
图片显示 1. 本地图片 Image.asset加载项目资源包的图片 //先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets Image.a ...

Flutter 圆形（头像）图片的 4种实现