【Flutter】トップ画面に日替わりのGIF画像とテキストを表示する。
はじめに
現在の、おしゃべり猫型ロボット「ミーア」のトップ画面は、下記。
2023年8月時点の、まだプロトタイプ状態だったミーアの静止画が表示されているのみ。
より、ユーザーに毎日アプリを開いて楽しんでもらえるように、下記実装を追加する。
- ミーアの静止画をGIFアニメーションにする
- GIFアニメーションに加えて、「本日のミーアの一言」を表示
- GIFアニメーションと一言フレーズを日替わりで表示して、毎日の変化をユーザーに楽しんでもらう。
GIF画像とテキストの用意
まず、表示したいGIF画像とテキストのリストを準備する必要がある。
GIF画像に関しては、ミーアではさまざまな目の表情の画像を用意しており、下記の記事で、目の画像をアップロードすればそのまま動作検証とGIFのダウンロードできる関数を作成したので、こちらを利用。
こんな感じでgif画像をいくつか作成してみた。
gif画像をpubspec.yamlに記載
Flutterプロジェクトで画像やその他のアセットを使用する際には、それらをpubspec.yamlに記載してFlutterに知らせる必要がある。これにより、ビルドプロセス中にFlutterがアセットをアプリのアセットバンドルに含めることができる。
assets/images配下にGIF画像を配置して、それをpubspec.yamlに記載する。
**pubspec.yamlにアセットセクションを追加し、画像のパスを記載。フォルダ内のすべての画像を一度に追加したい場合は、ディレクトリのパスを記述し、末尾に/**を付けて、フォルダ内のすべてのファイルを含めるようにする。
flutter:
assets:
- assets/images/
もしくは、特定のファイルだけを明示的に追加する場合は、ファイル名を個別に記載する。
flutter:
assets:
- assets/images/specific_image.gif
- assets/images/another_image.gif
**pubspec.yamlに記載した後は、flutter pub getを実行して変更を有効にする。これで、Image.asset**などのウィジェットを使用してアセットを読み込むことができる。今回は、多くのgif画像を取り込むので、imagesディレクトリをassetsとして指定。
日替わりのメッセージとGIFを取得する関数を実装
画像とテキストを扱う関数を別ファイルに分け、それをトップ画面から呼び出すようにする。**daily_message_service.dart**という新しいファイルを作成し、その中に日替わりのメッセージとGIFを取得する関数を実装する。
続きは、こちらで記載しています。
Discussion