Flutter: アセットから画像を取得できない

Question

プロジェクト内にimagesフォルダを作成し、その中にpng形式の画像が四枚入ってます。

pubspec.yamlで以下のように設定し、imagesフォルダの中の画像を取得しようとしています。

main.dartからImage.asset()で画像を呼ぶような処理を書いて実行したところ、取得が失敗する旨のエラーが発生しました。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const GridViewCount());
  }
}

class GridViewCount extends StatelessWidget {
  const GridViewCount({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var list = [
      _photoItem("icon0"),
      _photoItem("icon1"),
      _photoItem("icon2"),
      _photoItem("icon3"),
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text("GridView"),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        children: list,
      ),
    );
  }

  Widget _photoItem(String image) {
    // ファイルパス
    var assetsImage = "images/" + image + ".png";
    return Container(
      child: Image.asset(  // 画像呼び出し
        assetsImage,
        fit: BoxFit.cover,
      ),
    );
  }
}

エラー内容

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: images/icon0.png

When the exception was thrown, this was the stack: 
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:224:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "images/icon0.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#4ba6d(), name: "images/icon0.png", scale: 1.0)
====================================================================================================

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: images/icon1.png

When the exception was thrown, this was the stack: 
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:224:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "images/icon1.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#4ba6d(), name: "images/icon1.png", scale: 1.0)
====================================================================================================

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: images/icon2.png

When the exception was thrown, this was the stack: 
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:224:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "images/icon2.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#4ba6d(), name: "images/icon2.png", scale: 1.0)
====================================================================================================

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: images/icon3.png

When the exception was thrown, this was the stack: 
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:224:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "images/icon3.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#4ba6d(), name: "images/icon3.png", scale: 1.0)
====================================================================================================

Flutter初心者のため、初歩的なところでミスしている気もしますが、特定できませんでした。

ご教授お願いします。

参考記事
https://qiita.com/yu124choco/items/a2710ec004d3425a2a0b

Answer 1

普段、エミュレータで試していたのですが、実機に変えたら表示されました。
理由はわかりませんが、以降は実機で動作確認することにします。

Answer 2

インデントブロックを正しく考慮して記述していますか。
pubspec.yamlではインデントも含めたパース(コードの解析)が行われるので

assets:
  - images/

のように、- images/の前に半角スペースを2つ(環境によっては4つ)挿入してみてください。
それでもUnable to load assetのエラーが出る場合は、そもそもassetsを記述する位置が違うのかもしれません。
参考

Comments

[massanmesu]

ご回答ありがとうございます。

半角スペースを2つ4つとも試しましたが変化ありませんでした。
記述場所も`flutter:`インデントブロックの中です。

今やりたいことはGridViewの使い方を理解することなので、最悪表示されなくても挙動の確認はできますので、今のところは諦めて作業に集中します。

ご教授ありがとうございました。