Flutter -------- 加載本地圖片資源和網絡圖片

在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