使用占位符淡入图片
使用默认的 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',
),
),
),
);
}
}