【Flutter】assetで保存した画像をImageで表示する

Flutterのプロジェクトに保存した画像をImageで表示する方法を紹介します。

画像の保存方法を紹介した後でImage.asset を使って画像を表示させていきます。

\ 世界最大級のオンライン学習サービス /

目次

Image.assetで使用する画像の保存方法

まずはImage.asset で使用する画像を保存する方法を紹介します。

画像の保存

開発中のFlutterアプリのプロジェクト直下にassets>images の階層でディレクトリをつくり、画像をimages に保存します。

今回は下画像bird.pngimagesに保存しています。

pubspec.yamlの更新

flutter:
  assets:
    - images/

フォルダを作成したらpubspec.yaml に上記のようにコードを追加し更新します。

Image.assetの使い方

Image.asset('images/bird.png'),

Image.asset のコンストラクタでimages に保存してある画像を上記コードのように渡します。

一緒に読みたい

参考

  • URLをコピーしました!
目次