【Flutter Widget of the Week #13】FadeInImageを使ってみた
はじめに
Flutter Widget of the Week #13 FadeInImage についてまとめましたので、紹介します。
FadeInImage とは
ネットワークから画像をダウンロードして表示する場合、ダウンロードを待つ間にプレースホルダーを表示させたいと考えたことはありませんか？
そんなときに FadeInImage が使用できます。
プレースホルダーとは
プレースホルダー（英：placeholder）とは、あとから入力される文字・値の代わりに、仮に入力されている文字や値のことです。
今回だと画像が表示されるまでの間に表示する画面のことです。
それでは、実際に使ってみましょう。
FadeInImage サンプル
まずは API Document にあるサンプルを動かしてみましょう。
class FadeInImageSample extends StatefulWidget {
const FadeInImageSample({super.key});
State<FadeInImageSample> createState() => _FadeInImageSampleState();
}
class _FadeInImageSampleState extends State<FadeInImageSample> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FadeInImage Sample'),
),
body: SafeArea(
child: Center(
child: FadeInImage.assetNetwork(
// 実行してすぐのクルクルの画像(プレースホルダー)
placeholder: 'images/waiting.png',
// 表示させたい画像
image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/440px-Google-flutter-logo.svg.png', // Flutter ロゴの画像
height: 50,
),
),
),
);
}
}
使い方として、
プレースホルダーの画像はアプリの assets ディレクトリから指定することもできれば、メモリから指定することもできます。
/* アプリの assets ディレクトリから指定する方法 */
FadeInImage.assetNetwork(
placeholder: 'assets/○○.png', // assets ディレクトリにある画像を指定
image: '画像のpath',
)
/* メモリから指定する方法 */
FadeInImage.memoryNetwork(
placeholder: 'localImageBytes', // メモリーの画像データを指定
image: '画像のpath',
)
基本的には上記のどちらかを使って、placeholder の画像と image の画像を指定してあげるだけで使用することができます。
FadeInImage のプロパティについて
FadeInImage にはたくさんのプロパティがあります。
FadeInImage.assetNetwork か FadeInImage.memoryNetwork のどちらを使うかで多少変わる部分もありますが、基本的なものは同じです。
いくつか紹介します。
(new) FadeInImage FadeInImage({
Key? key,
required ImageProvider<Object> placeholder,
ImageErrorWidgetBuilder? placeholderErrorBuilder,
required ImageProvider<Object> image,
ImageErrorWidgetBuilder? imageErrorBuilder,
bool excludeFromSemantics = false,
String? imageSemanticLabel,
Duration fadeOutDuration = const Duration(milliseconds: 300),
Curve fadeOutCurve = Curves.easeOut,
Duration fadeInDuration = const Duration(milliseconds: 700),
Curve fadeInCurve = Curves.easeIn,
double? width,
double? height,
BoxFit? fit,
BoxFit? placeholderFit,
AlignmentGeometry alignment = Alignment.center,
ImageRepeat repeat = ImageRepeat.noRepeat,
bool matchTextDirection = false
})
①placeholder
ターゲット画像(image プロパティに指定した画像)のロード中に表示される画像を指定する
型は ImageProvider<Object> 型
assetNetwork だと String 型
memoryNetworkだと Uint8List 型
②image
ターゲット画像が読み込まれた後に表示される画像を指定する
型は ImageProvider<Object> 型
assetNetwork/memoryNetwork どちらも String 型
③width
画像の横幅の大きさを指定する
型は double 型
④height
画像の縦幅の大きさを指定する
型は double 型
⑤fadeInCurve
プレースホルダーがダウンロード画像に置き換えられるときのフェードイン（ダウンロード画像を表示するアニメーション）の種類を指定する
デフォルトは Curves.easeIn
型は Curve 型
⑥fadeInDuration
フェードインの所要時間を指定する
デフォルトは Duration(milliseconds: 700)
型は Duration 型
⑦fadeOutCurve
プレースホルダーがダウンロード画像に置き換えられるときのフェードアウト（プレースホルダーを消すアニメーション）の種類を指定する
デフォルトは Curves.easeOut
型は Curve 型
⑧fadeOutDuration
フェードアウトの所要時間を指定する
デフォルトは Duration(milliseconds: 300)
型は Duration 型
追加サンプルコード
上記のプロパティを使って少しいじってみましょう。
上のサンプルの FadeInImage.assetNetwork を以下のように変えてみました。
FadeInImage.assetNetwork(
height: 300,
width: 300,
fadeInCurve: Curves.bounceIn,
fadeInDuration: Duration(milliseconds: 1000),
fadeOutCurve: Curves.easeOutCubic,
fadeOutDuration: Duration(milliseconds: 1000),
placeholder: 'images/waiting.png',
image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/440px-Google-flutter-logo.svg.png',
),
実行画面
最後に
今回は FadeInImage を紹介しました。
画像を表示するにも、表示されるまでの見え方一つ気にするだけでクオリティが高くなったように感じますね。
面白い Widget なので是非使ってみてください。
次は #14 StreamBuilder です。またお会いしましょう。
参考記事
Discussion