Contents
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', ), ), ), ); } }
参考