Flutter -------- load local picture resources and network pictures

Load local image resources in Flutter

Create the folder images in the directory of Flutter project, and add several pictures to the folder

Designated resources

In the pubspec.yaml file

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

The shuttle section of the assets section specifies the files that should be included in the application Each asset is identified by an explicit path relative to the location of the pubspec.yaml file.

The order in which assets are declared is irrelevant. The actual directory of the asset can be any folder (in this case images).

 


Code:

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(

        //Horizontal bisector
        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,),
          ],
        ),


      //Split picture vertically
      /*  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,),
          ],
        ),*/

      ),
    );
  }
}

Official documents

https://docs.flutter.io/flutter/painting/AssetImage-class.html

https://docs.flutter.io/flutter/widgets/Image-class.html

 

Network picture implementation:

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"),
          //Placeholder picture (picture shown by default)
          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',)
        ],
      ),
    );
  }
}

Reference documents:

https://docs.flutter.io/flutter/widgets/Image/Image.network.html

Tags: Mobile network SDK github

Posted on Sun, 10 Nov 2019 12:51:28 -0500 by PatriotXCountry