使用佔位圖淡入圖片
當你使用預設的 Image 元件（Widget）來顯示圖片時， 你可能會注意到圖片載入時會直接出現在螢幕上。 這種方式可能會讓使用者感覺視覺上有些突兀。
那麼，是否可以一開始先顯示一個佔位圖， 等圖片載入完成後再以淡入效果顯示呢？你可以使用 FadeInImage 元件（Widget）來達成這個目的。
FadeInImage 可以搭配各種類型的圖片使用：記憶體內、在地資源（assets）， 或來自網路的圖片都可以。
記憶體內圖片
#在這個範例中，使用 transparent_image 套件作為簡單的透明佔位圖。
dart
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),完整範例
#dart
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Stack(
children: <Widget>[
const Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),
),
],
),
),
);
}
}
從資源包（asset bundle）載入
#你也可以考慮使用本地資源（assets）作為預設圖片（placeholder）。 首先，將資源新增到專案的 pubspec.yaml 檔案中 （更多細節請參考 Adding assets and images）：
yaml
flutter:
assets:
- assets/loading.gif然後，使用 FadeInImage.assetNetwork() 建構函式（constructor）：
dart
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),完整範例
#dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Center(
child: FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),
),
),
);
}
}