アプリ内に置いている画像を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
  

…