在Flutter加载本地图片资源
在Flutter项目目录下创建文件夹 images ，在文件夹中添加几张图片
指定资源
pubspec.yaml文件中
version: 1.0.0+1 environment:
sdk: ">=2.1.0 <3.0.0" -------- flutter: this:
assets:
- images/lake.jpg
- images/a.png
- images/pic1.png
- images/pic2.png
- images/loading_circle.gif
该assets部分的flutter部分指定应包含在应用程序中的文件。 每个asset都通过相对于pubspec.yaml文件所在位置的显式路径进行标识。
asset的声明顺序是无关紧要的。asset的实际目录可以是任意文件夹（在本示例中是images）。
代码：
class UITest2_Image extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: new AppBar(
title: new Text("Image"),
),
body: new Center(
//水平平分图片
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Image.asset('images/a.png',width: 100,height: 100,),
new Image.asset('images/a.png',width: 100,height: 100,),
new Image.asset('images/a.png',width: 100,height: 100,),
],
),
//垂直平分图片
/* child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Image.asset('images/a.png',width: 100,height: 100,),
new Image.asset('images/a.png',width: 100,height: 100,),
new Image.asset('images/a.png',width: 100,height: 100,),
],
),*/
),
);
}
}
官方文档
https://docs.flutter.io/flutter/painting/AssetImage-class.html
https://docs.flutter.io/flutter/widgets/Image-class.html
网络图片实现：
class NetImage extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text("Image"),
),
body: Column(
children: <Widget>[
new Image.network("https://avatars3.githubusercontent.com/u/19513504?s=460&v=4"),
//占位符图片（默认显示的图片）
new FadeInImage.assetNetwork(placeholder: 'images/loading_circle.gif', image: "https://avatars3.githubusercontent.com/u/19513504?s=460&v=4"),
//gif
new Image.network('https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',)
],
),
);
}
}
参考文档：
https://docs.flutter.io/flutter/widgets/Image/Image.network.html