flutter 加载图片

转载自 https://www.jianshu.com/p/c46545277bbe 

 

Image控件即图片控件，是显示图像的控件，Image控件有多种构造函数：

new Image，用于从ImageProvider获取图像。
new Image.asset，用于使用key从AssetBundle获取图像。
new Image.network，用于从URL地址获取图像。
new Image.file，用于从File获取图像。

获取本地图片
首先最重要的是引入图片， 在pubspec.yaml 文件中添加你要引入的图片

flutter:
  assets:
    - assets/1.jpg

然后你需要创建一个assets 的文件夹 里面有一个叫做 1.jpg 的图片
 

        new Image.asset（本地静态资源的地址）    

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyImg(),
    );
  }
}

class MyImg extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title:'图片如何放入',
      home: new Scaffold(
        body: new Center(
         child: new Image.asset('assets/1.jpg'),    
        ),
      )
    );
  }

}

 

还有就是背景图片

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title:  Text('First Screen'),
      ),
      body:  Center(
        child: Container(
          child: new Text('hello'),
          decoration:  BoxDecoration(
            image:  DecorationImage(
              image:  AssetImage('assets/1.jpg'),
            ),
          ),
          width: 200,
          height: 200,
        ),
      ),

    );
  }
}

 

获取网络图片

new Images.network（网络资源https/http）

 

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyImg(),
    );
  }
}

class MyImg extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title:'图片如何放入',
      home: new Scaffold(
        body: new Center(
        child: new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533368711441&di=9517daea3b4fc02d74b27a1f0e2d11f8&imgtype=0&src=http%3A%2F%2Fimage13-c.poco.cn%2Fmypoco%2Fmyphoto%2F20121102%2F22%2F66582707201211022200252633924731300_000_640.jpg'),
        ),
      )
    );
  }

}