使用佔位符淡入圖片
使用預設的 Image 元件顯示圖片時，你可能會注意到它們在載入時會突然出現在螢幕上。這可能會讓你的使用者感到視覺上的不適。
相反，如果能先顯示一個佔位符，然後圖片在載入完成後漸入，那不是更好嗎？使用 FadeInImage 元件即可實現此目的。
FadeInImage 適用於任何型別的圖片：記憶體中、本地資產或來自網際網路的圖片。
記憶體中
#在此示例中，使用 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',
),
),
],
),
),
);
}
}
從資源包中
#你也可以考慮使用本地資產作為佔位符。首先，將資產新增到專案的 pubspec.yaml 檔案中（更多詳細資訊，請參閱新增資產和圖片）
yaml
flutter:
assets:
- assets/loading.gif然後，使用 FadeInImage.assetNetwork() 建構函式
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',
),
),
),
);
}
}