画像をアセットに登録して使う方法

Page content

Flutter で画像をアセットに登録して使う方法を紹介します。

このエントリーをはてなブックマークに追加

準備

まず画像ファイルをassetsディレクトリに配置します。

Flutterプロジェクトを生成した直後はassetsディレクトリは存在しないので作成してください。

assetsディレクトリにimagesディレクトリを生成して、そこにavatar.jpgを配置した場合を紹介します。

assets/images/avatar.jpg

アセットを登録

画像ファイルを配置しただけではプログラムから読むことができないので、pubspec.yamlに登録する必要があります。

pubspec.yamlを開くと以下のようにコメントアウトされている箇所があります。

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

このコメントを削除して、以下のようにアセットを追加します。

  assets:
    - assets/images/avatar.jpg

ファイルを一つ一つ指定してもいいのですが、ディレクトリを指定するとその下のファイルすべてをアセットに登録することができます。ファイルが多い場合はディレクトリを指定するのが良いでしょう。

  assets:
    - assets/images/

ディレクトリを指定する場合は最後の/を忘れずに入れるようにしましょう。

プログラムから呼び出す方法

Image.asset を使う方法

一番簡単に表示させる場合、以下のようにImage.assetの引数にアセットのパスを指定します。

Image.asset('assets/images/avatar.jpg')

AssetImage を使う方法

CircleAvatarなどでアセットを使用する場合はAssetImageを使用します。

CircleAvatar(
  backgroundColor: Colors.white,
  backgroundImage: AssetImage('assets/images/avatar.jpg'),
),

AssetImageImageProviderを継承しており、Widget ではないのでそのまま表示することができません。ご注意ください。

flat_flutterアプリUserAccountsDrawerHeader部分で使ってるので実際コードも確認してみてください。

Flutter 公式ドキュメント

このエントリーをはてなブックマークに追加