Flutter 加载本地/网络图片

本地图片

1. 创建目录

当我们创建好一个工程的时候，工程里没有默认的图片文件夹，自己创建一个就好。

image.png

2. pubspec.yaml 配置图片(讲道理有点麻烦)

打开 pubspec.yaml 找一找，能在某行看到下面红框内的内容，把注释关掉，图片名称换成自己的图片名，有几张就几行！！好奇怪的设定！！

2019-07-10 更新 ：现在发现只要设置 - images/就可以了，这个文件夹中的图片资源都可以调用，如果有二级目录的话，再设置一个- images/second/ 就可以了

image.png

注意：这里有个毛病，缩进！！！没注意到就会导致图片出不来！

image.png

配置好后，command + s 然后进入下一步。

3.获取依赖

保存pubspec.yaml后，回到我们需要用到图片的.dart会出现这个提示，选红框中的按钮后，我们开始加载图片。

image.png

4.加载图片

我们直接在初始模板里面操作。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Image(image: AssetImage('images/xhj.jpg')),
    );
  }
}

5.效果图

image.png

网络图片

网络图片简单加载比加载本地图片方便好多，这里先用一种方式加载一下。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561870951916&di=aaddb0c744a6f46c890f9784c2346422&imgtype=0&src=http%3A%2F%2Fs9.sinaimg.cn%2Fbmiddle%2F005XWbeUgy6QwbUP4QE58%26690'),
    );
  }
}

这里就不展示效果图了。嘻嘻。