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); },
)
),
);