本地图片
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'),
);
}
}
这里就不展示效果图了。嘻嘻。
