Flutter中，通過Image組件來加載并顯示圖片,可以從asset、文件、內存以及網絡獲取圖片，都需要實現不同的ImageProvider。

Flutter 圖片加載方式:

Image()  // 通用方法，使用ImageProvider實現，如下方法本質上也是使用的這個方法
Image.asset // 加載資源圖片
Image.file  // 加載本地圖片文件
Image.network  // 加載網絡圖片
Image.memory   // 加載Uint8List資源圖片

從asset中加載圖片

AssetImage是實現了從Asset中加載圖片的ImageProvider。

1. 在工程根目錄下創建一個images目錄，并將圖片avatar.png拷貝到該目錄。
   也可以設置其他自定義目錄,如lib下面的images,方便管理。
2. 在pubspec.yaml中的flutter部分添加如下內容：

assets:
    - images/avatar.png
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

如果不想像這樣每添加一張圖片都添加一條配置，直接包含某一個目錄中的所有的資源，直接指定目錄的名稱：

assets:
    - images/

注意: 由于 yaml 文件對縮進嚴格，所以必須嚴格按照每一層兩個空格的方式進行縮進，此處assets前面應有兩個空格。

3. 加載圖片

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0
);

或者使用Image提供的一個快捷構造函數Image.asset用于從asset中加載圖片：

Image.asset("images/avatar.png",
  width: 100.0,
)

從網絡加載圖片

Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)

或者使用Image提供的一個快捷的構造函數Image.network用于從網絡加載圖片：

Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

注意一些點:
1.Image 的width、height參數，當不指定寬高時，圖片會根據當前父容器的限制，盡可能的顯示其原始大小。
如果只設置width、height的其中一個，那么另一個屬性默認會按比例縮放,可以通過fit屬性來指定適應規則,具體介紹參考文檔。

2.Image緩存，Image加載過得圖片只在內存中會有緩存，無法緩存本地。一旦應用關閉，這個緩存就沒有了，下次重新啟動還會從網絡下載并緩存。

cached_network_image

一個用于顯示來自Internet的圖像并將它們保存在緩存目錄中的flutter庫，可以用來加載和緩存網絡圖像，也可以與占位符和錯誤小部件一起使用。

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),//CircularProgressIndicator 屬于cached_network_image庫
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

transparent_image

有默認占位圖和淡入效果。

import 'package:transparent_image/transparent_image.dart';

FadeInImage.memoryNetwork(
    placeholder: kTransparentImage, //透明圖,kTransparentImage 屬于 transparent_image 庫
    image: 'http://via.placeholder.com/350x150',
);

可以使用應用內的圖片來做占位圖:

FadeInImage.assetNetwork(
      placeholder: "lib/images/a.jpeg",
      image: "http://via.placeholder.com/350x150")