モケラ

Tech Sheets

mokelab

Flutterで、アセット内の画像を表示する

最終更新日:2022-05-08

Flutterでアセット内(アプリ内)の画像を表示するには、 Image.asset() を使用します。公式ドキュメントはこちら

画像を用意する

表示する画像は事前に登録しておく必要があります。画像の登録は pubspec.yaml で行います。ここでは moke.png という画像を登録してみます。

// 中略
flutter:
  uses-material-design: true

  assets:
    - images/moke.png

次に、画像を images フォルダに配置します。ピクセル密度毎に用意する必要があるので、次のようにピクセル密度をつけたフォルダに配置していきます。

images/moke.png
images/2.0x/moke.png
images/3.0x/moke.png

画像を表示する

画像が用意できたら、早速表示させてみましょう。表示させるには Image.asset() を使います。

Scaffold(
  appBar: AppBar(title: Text(this.title)),
  body: Center(
    child: GestureDetector(
      // pubspec.yamlに記述したファイル名を記述する
      child: Image.asset('images/moke.png'),
      onTap: () { Navigator.pop(context); },
    )
  ),      
);  

一覧に戻る