1. 加载远程图片

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(//组件居中
        child: Container(//容器组件
              width:  300,//都是double 写成int也可以
              height: 300,
              child: Image.network(
                'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg',
                alignment: Alignment.center,//图片对其方式
                // fit: BoxFit.cover,//图片显示效果 控制图片的拉伸和挤压 这都市根据父容器来的 fit属性和repeat属性冲突 不能同时设置
                // color: Colors.red,//设置图片的背景颜色通常和colorBlendMode配合一起使用，可以是图片颜色和背景颜色混合
                // colorBlendMode: BlendMode.luminosity,
                repeat: ImageRepeat.repeat//平铺
                ),
              decoration: BoxDecoration(//设置组件边框的颜色宽度 背景色
                color: Colors.yellow,
              ),
        ),
  );
  }

}

效果图

2. 实现圆形图片

通过把Container设置裁剪为圆形，设置decoration属性，里面的image子属性实现圆形图片。

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(//组件居中
    //显示圆形图片 通过Container里面的decoration里面的image实现
        child: Container(//容器组件 Container应该像是iOS里面的View
              width:  300,//都是double
              height: 300,
              decoration: BoxDecoration(//设置组件边框的颜色宽度 背景色
                color: Colors.yellow,
                border: Border.all(//设置容器边框的颜色宽度
                  color: Colors.red,
                  width: 2.0
                ),
                borderRadius: BorderRadius.all(//对组件进行裁剪 可以实现圆角图片
                  Radius.circular(150)
                ),
                // borderRadius: BorderRadius.circular(150),
                image: DecorationImage(
                  image: NetworkImage('http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg'),
                  fit: BoxFit.cover,//图片显示效果
                  // repeat: ImageRepeat.repeat//平铺
                )
              ),
        ),
  );
  }

}

通过ClipOval组件实现
- 只需要设置图片会自动通过图片的宽高来裁剪图片。但是图片的效果可能会不理想，如果要设置为圆形图片需要设置宽高和fit属性。

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(//组件居中
    //显示圆形图片 通过ClipOval
        child: Container(//容器组件 Container应该像是iOS里面的View
              child: ClipOval(
                child: Image.network(
                  'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg',
                  height: 100,
                  width: 100,
                  fit: BoxFit.cover,
                ),
              ),

        ),
  );
  }

}