目錄
description bug_report

佔位符和網路圖片淡入

目錄

當使用預設的 Image widget 顯示圖片時，你可能會注意到圖片只是在載入完後直接顯示到螢幕上，使用者可能會覺得這看起來不舒服。

此外，如果可以先展示佔位符，待圖片載入完成後淡入顯示圖片不是很酷麼？可以使用 Flutter 自帶的 FadeInImage widget 來實現這個功能。

FadeInImage 適用於任何型別的圖片：記憶體中的，本地儲存的，抑或是網路上的。

從記憶體載入佔位符

本例將使用 transparent_image 套件來實現一個簡單的透明佔位符。

FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://picsum.photos/250?image=9',
),

完整範例

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() 建構式函式：

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

完整範例

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