Flutter 圓形（頭像）圖檔的 4種實作

測試圖檔：

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

效果如下：