内容
description bug_report

使用占位符淡入图像

内容

使用默认的 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',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Fading In Image Demo

从资源包

#

您也可以考虑使用本地资源作为占位符。首先，将资源添加到项目的 pubspec.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',
          ),
        ),
      ),
    );
  }
}

Asset fade-in