Flutter开发之圆角图片的实现

Image 圆角的几种处理方式：

1.利用Container组件的decoration属性实现

child: Container(
        height: 300.0, //容器高度
        width: 300.0, //容器宽度
        decoration: BoxDecoration(
            //装饰线
            color: Colors.blue[600], //颜色
            border: Border.all(
                //边框
                //color: Colors.deepOrange,
                width: 2.0),
            borderRadius: BorderRadius.all(
              //边框半径
              Radius.circular(150), //圆形
            ),
            image: DecorationImage(
              image: NetworkImage(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
              ),
              fit: BoxFit.cover,
              repeat: ImageRepeat.noRepeat, //平铺模式
            )),
      ),

2.利用裁剪组件ClipOval实现

child: Container(
        height: 300.0, //容器高度
        width: 300.0, //容器宽度
        child: ClipOval(
            child: Image.network(              
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
              height: 100,
              width: 100,
              fit: BoxFit.cover,
            
            ),
        ),

注意：这里设置ClipOval子组件为image，并对image设置宽高为100，但你会发现实际的image显示时会充满整个Container。

3.利用CircleAvatar组件实现