Fade in images with a placeholder

When displaying images using the default Image widget, you might notice they simply pop onto the screen as they’re loaded. This might feel visually jarring to your users.

デフォルトのImageウィジェットを使用して画像を表示する場合、読み込み中に画面に突然表示されるだけであることに気付くかもしれません。これは、ユーザーに視覚的に不調和な感じがするかもしれません。

Instead, wouldn’t it be nice to display a placeholder at first, and images would fade in as they’re loaded?

代わりに、最初はプレースホルダを表示し、画像がロードされてからフェードインするのが良いのではないでしょうか?

Use the FadeInImage widget for exactly this purpose.

まさにこの目的のためにFadeInImageウィジェットを使用してください。

FadeInImage works with images of any type: in-memory, local assets, or images from the internet.

FadeInImageウィジェットはインメモリ、ローカルアセット、またはインターネットからの画像など、あらゆる種類の画像で動作します。

In-Memory

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

Complete example

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

From asset bundle

You can also consider using local assets for placeholders.

プレースホルダにはローカル アセットを使用することも検討できます。

First, add the asset to the project’s pubspec.yaml file (for more details, see Adding assets and images):

まず、アセットをプロジェクトのpubspec.yamlファイルに追加します (詳細については、アセットとイメージの追加を参照してください)。

pubspec.yaml

 flutter:
   assets:
+    - assets/loading.gif

Then, use the FadeInImage.assetNetwork() constructor:

次にFadeInImage.assetNetwork()コンストラクタを使います。

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

Complete example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

参考

https://flutter.dev/docs/cookbook/images/fading-in-images