當網速很慢時，我們常會看到畫面中有一直在轉圈圈的動畫，這是圖片載入完成前的placeholder暫代效果，使用者不會看到一片空白的畫面，而是透過轉圈圈的動畫，曉得畫面還在loading，而不是系統壞掉，這樣可以提升整體的使用體驗。在Flutter裡也有FadeInImage可以達到這個效果。

FadeInImage

FadeInImage我們可以設定的常用參數有：

• height、width
• image：要載入的圖片
• placeholder：圖片載入前的暫代圖
• fadeInDuration：指定動畫的時間
• fadeInCurve：指定placeholder換成要顯示的圖片時的動態效果

另外如果要做會變透明的placeholder可以用transparent_image package library，我會用這個來做範例。

添加FadeInImage

FadeInImage有兩種圖片模式，一種是使用系統暫存圖片memoryNetwork：

FadeInImage.memoryNetwork(
  placeholder: kTransparentImage, //這是transparent_image提供的圖
  image: 'https://picsum.photos/250?image=9',
),

另一種是自訂的assets資源圖片assetNetwork：

FadeInImage.assetNetwork(
  placeholder: 'assets/waiting.png',
  image: 'https://picsum.photos/250?image=9',
),

安裝'transparent_image'

要使用transparent_image首先一樣要在上一篇Day14-簡單又快速地打包Flutter圖片資源中用過的pubspec.yaml加入package

dependencies:
  flutter:
    sdk: flutter
  transparent_image: ^1.0.0  //flutter sdk是預設的，接著加在後面就好

然後在Command line中安裝package

flutter pub get

接著import package到main.dart

import 'package:transparent_image/transparent_image.dart';

完成後會長這樣

完整code在這，有興趣的人可以參考看看～