Flutter-CircleAvatar圓形和圓角圖片

原文：https://www.jianshu.com/p/3d8d547ce99d

/**
 * 發現不添加Align時，CircleAvatar並沒有顯示為圓形，
 * 設置child為要顯示的url時，並不能顯示為圓形，只有設置backgroundColor或者backgroundImage時才顯示為了圓形
 * radius和minRadius與maxRadius不能同時使用;
 * ClipOval不在Align里面時也不能顯示為圓形，ClipOval中image設置為fit: BoxFit.fill才能顯示為圓形；
 * BoxDecoration不在Align里面時也不能顯示為圓形，BoxDecoration中image設置為fit: BoxFit.fill才能顯示為圓形；
 *
    const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,//背景色，相當於加載中或加載失敗的占位圖
    this.backgroundImage,//背景圖，相當於加載中或加載失敗的占位圖
    this.foregroundColor,//前景色，
    this.radius,
    this.minRadius,
    this.maxRadius,
    })
 */

body: ListView(
          padding: EdgeInsets.all(20.0),
          children: <Widget>[
            CircleAvatar(
              child: Image.network(
                  "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
//                backgroundColor: Color(0xffff0000),
//              backgroundImage: NetworkImage(
//                  "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
              radius: 40.0,
//              foregroundColor: Color(0x55000000),
            ),
            Align(
              child: CircleAvatar(
                child: Image.network(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
//                backgroundImage: new NetworkImage(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundColor: Color(0xffff0000),
                radius: 40.0,
              ),
            ),
            //圓行圖片
            Align(
              child: CircleAvatar(
//                child: Image.network(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundImage: NetworkImage(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundColor: Color(0xffff0000),
                radius: 40.0,
              ),
            ),
            Align(
              child: CircleAvatar(
//                child: Image.network(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                backgroundImage: NetworkImage(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                foregroundColor: Color(0xffff0000),
                radius: 40.0,
              ),
            ),
            Align(
              child: ClipOval(
                child: SizedBox(
                  width: 80.0,
                  height: 80.0,
                  child: Image.network(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                    fit: BoxFit.fill,),
                ),
              ),
            ),
            Align(
                child: Container(
                  width: 80.0,
                  height: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                      ),
                    ),
                  ),
                )
            ),
            //圓角圖片
            Align(
              child: Container(
                margin: EdgeInsets.only(top: 10.0),
                width: 80.0,
                height: 80.0,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(5.0),
                  child: Image.network(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Align(
                child: Container(
                  margin: EdgeInsets.only(top: 10.0),
                  width: 80.0,
                  height: 100.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(5.0),
                    image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                      ),
                    ),
                  ),
                )
            ),
          ],
        ),