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

测试图片：

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)),
            ),

效果如下：