本記事では、FadeInImageの基本的な使い方とサンプルコード、関連記事を紹介します。
Flutterの公式動画の「Widget of the Week」をベースに日本語で説明しています。
本記事を読むメリット
- FadeInImageの基本的な使い方や考え方がわかる
- FadeInImageのサンプルコードを確認できる
- 関連記事をトピック毎にまとめて確認できる
FadeInImageの基本的な使い方
要約
- 画像をダウンロードして表示するときはFadeInImageを使おう
- FadeInImageを使えば、ダウンロード中、プレースホルダを表示できる
- 画像の表示方法もいろいろ指定できる
説明
ネットワークから画像をダウンロードして表示する場合、ダウンロード中何も表示しないのはユーザーに不親切です。
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage1.gif)
FadeInImageを使えば、ダウンロード中にプレースホルダを表示することが可能です。
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage2.gif)
表示されるプレースホルダは様々な方法で指定できます。
次の例のように、アプリのassetディレクトリからイメージを指定することもできますし、メモリからそれを指定することもできます。
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage4-1-1024x541.png)
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage5-1024x543.png)
heightとwidth(高さと幅)のパラメータを設定して、ロードの前後にイメージがどれだけのスペースを使うかも指定できます。
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage6-1-1024x540.png)
アニメーションのduration(所要時間)を指定するには、fadeInDurationパラメータを使用します。
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage7-1024x543.png)
fadeInCurveを指定することで、プレースホルダがダウンロード画像に置き換えられる際のアニメーションを指定することもできます。
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage3.gif)
単純に透明なプレースホルダを使いたい場合は、transparent_imageパッケージも参考にしてください。
参考:https://pub.flutter-io.cn/packages/transparent_image
![](http://bukiyo-papa.com/wp-content/uploads/2019/12/fadeinimage8-1024x538.png)
動画
サンプルコード
・Google公式のFadeInImageのサンプルコード(英語)
Fade in images with a placeholder
・FadeInImageにborder radiusをつける方法
Flutterで画像にborder radiusをつける
関連記事
・FadeInImageのimageにNetworkImageを使うと動かない
FlutterでFadeInImageのplaceholderが出ないとき
・Image.network/memoryNetworkのパラメータ一覧の説明(英語)
Flutter – Display Image From Network URL & Show Loading
・Flutter 公式ドキュメント
FadeInImage class – widgets library – Dart API – Flutter
・関連書籍
Flutterの基本的な仕組みや周辺知識(テストやCIなど)を網羅的に学べる入門書
Flutter モバイルアプリ開発バイブル
・その他のwidgetについてはこちら
カテゴリ-Flutter
こちらのプログラミング書籍もおすすめ
(若手プログラマー向け、コーディングのレベルが1段階アップ!)
- 特定の言語に限らず、プログラミング初心者で理論から学びたい方におすすめ
- プログラムに不具合が発生する仕組みや原理を理解できます。
- その結果、不具合に強いコードが理解でき、書けるようになります。
- 既存動作を担保しつつ、ソースをリファクタするための方法論を知ることができます。
- テーマはテストですが、コーディングのレベルアップにも大きく役立ちます。
Head First Java 第2版 ―頭とからだで覚えるJavaの基本
- Javaなどのオブジェクト指向プログラミングの初心者におすすめ
- 初心者が躓きやすいポイントをわかりやすく解説(インターフェース、オブジェクト指向、ポリモーフィズムなど)
- コードをシンプルに保つことができるようになる
- ポリモーフィズムを利用した、拡張しやすいプログラムをつくることができるようになる。