在Flutter加载本地图片资源

在Flutter项目目录下创建文件夹 images ，在文件夹中添加几张图片

指定资源

pubspec.yaml文件中

version: 1.0.0+1environment:

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 extendsStatelessWidget{

@override

Widget build(BuildContext context) {//TODO: implement build

returnScaffold(

appBar:newAppBar(

title:new Text("Image"),

),

body:newCenter(//水平平分图片

child: newRow(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children:[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: [

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 extendsStatelessWidget{

@override

Widget build(BuildContext context) {//TODO: implement build

return newScaffold(

appBar:newAppBar(

title:new Text("Image"),

),

body: Column(

children:[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