【Flutter】ローカルの画像ファイル読み込み・表示させる

【はじめに】

この記事は「極めて個人的な」Flutterの勉強メモです。

[環境]
Android Studio Chipmunk | 2021.2.1
macOS 12.5

[内容]
Flutterプロジェクトに画像ファイルを格納し、アプリで読み込み・表示させる。

手順

1. 画像ファイルを格納するディレクトリを作成・ファイルを格納する
2. ファイルの格納場所をymlファイルに定義する
3. AssetImageを使って表示する

１. 画像ファイルを格納するディレクトリを作成・ファイルを格納する

Flutterプロジェクトを右クリックし、　New>Deirectory を選択する。

Directory名を入力する（ここでは「images」とする）

次に作成したディレクトリに保存したいファイルをDrag&Dropする。
（プロジェクトのimagesディレクトリに直接Dropする）

すると以下のダイアログが表示されるので「Refactor」をクリックする。

2. ファイルの格納場所をymlファイルに定義する

プロジェクト直下の「pubspec.yml」をダブルクリックして表示する。

スクロールして「assets」を探し、コメントアウトを解除し、先ほどimagesに格納したファイル名に書き換える。
(Macならコメントアウトしたい範囲を選択し 「command + /」でコメントが解除できる。)

pubspec.yml

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

こんな感じ

pubspec.yml

 # To add assets to your application, add an assets section, like this:
  assets:
     - images/kuma.png

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

※ymlファイルのインデントは「スペース２個」であることに注意。

ymlファイルに修正が完了したら、pub getを実施する。

※もちろんコマンドラインからでも可

3. AssetImageを使って表示する

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('aaa'),
          backgroundColor: Colors.blue[900],
        ),
        backgroundColor: Colors.blueGrey,
        body: Center(
          child: Image(
            image: AssetImage('images/kuma.png'),
          ),
        ),
      ),
    ),
  );
}

こんな感じ