アプリ内に置いている画像をImage.assetメソッドで読み込んで表示させます。

基本

(1)読み込みたい画像をプロジェクトルート直下のassetsディレクトリに入れます。

ということでまずプロジェクトルート直下に画像などのアセットを入れるディレクトリ、assetsディレクトリを作ります(androidディレクトリの下)。

---

(2)次にassetsディレクトリに、読み込みたい画像を入れます。

assetsディレクトリ直下に

Screenshot_1596586622.png

を入れました。

そしてassetsディレクトリ内にもう一つディレクトリ「imagesディレクトリ」を作ります。

そしてassets/imagesディレクトリ内に

diamond.png

ファイルを入れました。

---

(3)pubspec.yamlファイルに、「assetsディレクトリ内のアセット(画像)をアプリで使う」ことを示すコードを記述します。

pubspec.yaml

flutter:

  uses-material-design: true
  assets:
    - assets/

pubspec.yamlファイルのflutterセクションのassetsサブセクションに上記のように記述します。

インデントが「スペース二つ」でないと画像を読み込めませんので注意しましょう。

---

(4)これで

Screenshot_1596586622.png

を読み込めるようになったので、main.dartファイルに

//main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Image.asset('assets/Screenshot_1596586622.png'),
      ),
    );
  }
}

↑のように記述して実行すると

画像が読み込めました。

---

(5)次にassets/imagesディレクトリ内のdiamond.pngを表示させます。

pubspec.yamlファイルを(3)のように記述して、main.dartファイルを

//main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Image.asset('assets/images/diamond.png'),
      ),
    );
  }
}

上記のように記述して実行させると、

════════ Exception caught by image resource service ════════════════════════════════════════════════
Unable to load asset: assets/images/diamond.png

このようなエラーが発生して、画像が読み込めません。

画像のpathは間違っていないのですが、原因はpubspec.yamlファイルの記述です。

pubspec.yamlファイルで

flutter:

  uses-material-design: true
  assets:
    - assets/

このように指定すると、assetsディレクトリ直下の画像ファイルは全て読み込めるようになりますが、この指定方法だとassetsディレクトリ内のサブディレクトリやそのサブディレクトリ、、、の中にある画像は読み込めません。(Asset variantsのケースを除く)

この例で言うと、assetsディレクトリ直下にある

Screenshot_1596586622.png

は((4)でやったように)読み込めますが、assetsディレクトリのサブディレクトリであるimagesディレクトリ内にある

diamond.png

は読み込めません。

diamond.pngファイルを読み込みたい場合pubspec.yamlファイルで

pubspec.yamlファイル

flutter:

  uses-material-design: true
  assets:
    - assets/
    - assets/images/

↑のように指定する必要があります。

↑のように指定して、

pub get

を実行して、アプリを再実行(ホットリスタートではなくて再実行)すると、

diamond.pngを表示できました。

 

参考

Adding assets and images – Flutter