Image widget 是 Flutter 中用来展示图片的一个 widget

可以从一下几种方式中来学习 Image widget 的用途

怎么加载网络图片
怎么加载静态图片
怎么加载本地图片
怎么设置 Placeholder
怎么设置图片缓存
如何加载 Icon

支持以下图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBMP

Image 支持如下几种类型的构造函数：

new Image 用于 ImageProvider 获取图片
new Image.asset 使用 key 从 AssetBundel 获得的图像
new Image.network 从网络 URL 中获取图片
new Image.file 从本地文件中获取图片
new Image.memory 用于从 Uint8List 获取图像（从内存中读取图片）

为了让 Image 能够根据像素密度自动适配不同分辨率的图片，请使用 AssetImage 指定图像，并保证在 widget 树中的 Image widget 上方存在 $\color{red}{MaterialApp}$ 、 $\color{red}{WidgetsApp}$ 或 $\color{red}{MediaQuery}$ 窗口 widget

加载网络图片

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(  // 注意使用 MaterialApp 包裹
        title: 'Image widget Demo',
        theme: new ThemeData.fallback(),
        home: Image.network(
            'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg'
        )
    );
  }
}

加载静态图片，以及处理不同分辨率的问题

在 $\color{red}{pubspec.yaml}$ 文件中声明图片的路径

assets:
   image/my_icon.png

注意图片的存放位置：

使用 $\color{red}{AssetImage}$ 访问图片

Image(
  width: 26,
  height: 26,
  image: AssetImage(my_icon.png)
)

**除了我们使用的构造方法手动指定 $\color{red}{Assetimage}$ 之外，还可以通过 $\color{red}{Image.asset}$ 来加载静态图片：

Image.asset(
  my_icon.png,
  width: 26,
  height: 26
)

如何加载本地图片（sd 卡里面的图片）

加载绝对路径的本地图片

import 'dart:io';
Image.file(file('/sdcard/Download/Stack.png'));

不同的手机型号，sd 卡的名称不一样。

加载相对路径的本地图片

第一步：
在 pubspec.yarn 中添加 path_probider 插件

第二步：
导入头文件

import 'dart:io';
import 'package:path_provider/path_provider.dart';

// Image.file(file('/sdcard/Download/Stack.png'));
FutureBuilder(
  future:  _getLocalfile("Download/Stack.png"),
  builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
    return snapshot.data != null ? Image.file(snapshot.data) : Container();
  })
)

// 获取 SDCard 的路径：
Future<File> _getLocalFile(String filename) async {
  String dir = (await getExteralStorageDirectory()).path;
  File f = new File('$dir/$filename');
}

从内存中加载 placeholder

第一步
安装 transparent_image 插件。

第二步
按照官方文档使用

从本地资源中加载 placeholder

第一步
配置本地资源图片。

assets:
  - assets/loading.gif

第二步
加载本地资源图片作为 placeholder

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: '网络图片地址'
)

配置图片缓存

第一步
安装 cached_network_image 插件（从网络上加载图片，并且缓存图片到本地，提供给下次使用）。

第二步

// 记得引入

CachedNetworkImage(
  placeholder: (context, url) => new CirularProgressIndicator(),
  imageUrl: '网络图片地址'
)

加载 Icon

const Icon(
  this.icon,（或者 IconDate）// 可以自己构建，也可以使用Flutter提供的 material_fonts
  {
    Key key,
    this.size,
    this.color,
    this.semanticLabel, // 标志位
    this.textDirection // 绘制方向，一般使用不到
  }
)

使用 Icons

import 'package:flutter/material.dart'; // 一定要导入

new Center(
  child: new Icon(Icons.android, 100.0)
)

自定义 Icon

const IconData(
  this.codePoint, //必填， fonticon 对应的16精制 Unicode
  this.fontFamily, // 字体库
  this.fontPackage, // 字体在那个包中，不填仅在自己的程序中查找
  this.matchTextDirection: false // 图标是否按照图标绘制方向展示
)

配置 pubspec.yaml

fonts:
  - family: devio
    fonts:
       - asset: fonts/devie.ttf

使用

new Icon(
  new IconData(0xf5566, fontFamily: 'devio'),
  size: 100.0,
  color: Colors.blueAccent
)

【笔记不易，如对您有帮助，请点赞，谢谢】

Flutter 之 Image widget