一、Flutter图片组件

1.网络图片 Image.network

return Center(
child: Container(
child: Image.network(
"http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
alignment: Alignment.topLeft,
color: Colors.red,
colorBlendMode: BlendMode.colorDodge,
// repeat: ImageRepeat.repeatX,
fit: BoxFit.cover,
),
width: 300.0,
height: 400.0,
decoration: BoxDecoration(
color: Colors.yellow
),
),
);

image.png
image.png

2.本地图片 Image.asset

然后，打开 pubspec.yaml 声明一下添加的图片文件， 注意要配置对

image.png

最后，在代码中就可以用了

image.png

child: Container(
          child: Image.asset("images/a.jpeg",
                 fit:BoxFit.cover
                 ),
           width: 300.0,
           height: 300.0,
           decoration: BoxDecoration(
           color: Colors.yellow
          ),
),

3.实现圆角以及实现圆形图片

实现圆角图片

return Center(
           child: Container(
                     width: 300.0,
                     height: 300.0,
                     decoration: BoxDecoration(
                     color: Colors.yellow,
                      borderRadius: BorderRadius.circular(150),
                      image: DecorationImage(
                                  image: new NetworkImage('https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg'),
                    fit: BoxFit.cover
                                  )
                    ),
                 ),
      );

实现圆形图片

return Center(
           child: Container(
                    child:ClipOval(
                     child:Image.network("https://www.itying.com/images/201905/
                                                      thumb_img/1101_thumb_G_1557845381862.jpg",
                     width: 150.0,
                     height: 150.0,
                      ) ,
              )
         ),
);