【Flutter】FadeInImageの基本とサンプルコード

本記事では、FadeInImageの基本的な使い方とサンプルコード、関連記事を紹介します。

Flutterの公式動画の「Widget of the Week」をベースに日本語で説明しています。

本記事を読むメリット

  • FadeInImageの基本的な使い方や考え方がわかる
  • FadeInImageのサンプルコードを確認できる
  • 関連記事をトピック毎にまとめて確認できる

FadeInImageの基本的な使い方

要約

  • 画像をダウンロードして表示するときはFadeInImageを使おう
  • FadeInImageを使えば、ダウンロード中、プレースホルダを表示できる
  • 画像の表示方法もいろいろ指定できる

説明

ネットワークから画像をダウンロードして表示する場合、ダウンロード中何も表示しないのはユーザーに不親切です。

何もないところにいきなり画像が表示されるのはわかりにくい

FadeInImageを使えば、ダウンロード中にプレースホルダを表示することが可能です。

FadeInImageを使えば、ダウンロード中にプレースホルダを表示できる。

表示されるプレースホルダは様々な方法で指定できます。

次の例のように、アプリのassetディレクトリからイメージを指定することもできますし、メモリからそれを指定することもできます。 

heightとwidth(高さと幅)のパラメータを設定して、ロードの前後にイメージがどれだけのスペースを使うかも指定できます。 

アニメーションのduration(所要時間)を指定するには、fadeInDurationパラメータを使用します。

fadeInCurveを指定することで、プレースホルダがダウンロード画像に置き換えられる際のアニメーションを指定することもできます。

fadeInCurveにbounceInを指定しているので、画像が点滅するようにしてフェードインしている。

単純に透明なプレースホルダを使いたい場合は、transparent_imageパッケージも参考にしてください。

参考:https://pub.flutter-io.cn/packages/transparent_image 

動画

サンプルコード

・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などのオブジェクト指向プログラミングの初心者におすすめ
  • 初心者が躓きやすいポイントをわかりやすく解説(インターフェースオブジェクト指向ポリモーフィズムなど)
  • コードをシンプルに保つことができるようになる
  • ポリモーフィズムを利用した、拡張しやすいプログラムをつくることができるようになる。

 

この記事を書いた人

たかお

IT企業で開発者として6年経験を積んだ後、2019年からインドIT企業の日本法人でITコンサルにジョブチェンジ。
 
プログラミングはjava、js、html、cssあたりを仕事で6年くらい。
個人ではFlutterをいじってます。
学んだことを発信していきます。よろしくお願いします!
 
firebaseで簡単なタイピングアプリを作ってみました。
もしよければ遊んでみてください!
1位の記録や管理人(私)の記録と勝負できるようになってます!
 
タイピング・チャレンジャー
https://typing-challenger.com/