【Flutter】assetsにディレクトリや画像を追加する　pubspec.yaml操作編

今回はpubspec.yamlファイルの「assets」にディレクトリや画像を追加する方法を紹介します。実際に追加したローカル画像をAssetImageで表示させていきます！

ステップ１：ディレクトリの作成・画像の保存

pubspec.yamlファイルに新しいディレクトリ・画像を追加する前の準備を行います。

プロジェクト直下にassets > imagesの階層になるようディレクトリを作成し、imagesディレクトリに追加したい画像を保存します。（今回は「blue-bird.png」を保存）

ステップ２：pubspec.yamlにassetsを追加

pubspec.yamlファイルを開いたら「assets」の部分をアンコメントし、上画像のようにassetsの下に「- assets/images/」と追記（２スペース空ける）します。

「Pub get」をクリックしてpubspec.yamlファイルを更新します。Messagesでエラーが出なければassetsへの画像の追加は完了です。

assetsに追加したローカル画像を表示させる

無事画像を表示させることができました！（下記のコードを参照）

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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("初心者のためのFlutter入門学習サイト"),
        ),
        // ignore: prefer_const_constructors
        body: Center(
          child: const Image(
            image: AssetImage("assets/images/blue-bird.png"),
          ),
        ),
      ),
    );
  }
}

以上です。