Udemyセール開催中! 対象コースが1,220円から

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

Flutter  ディレクトリ・画像を 「assets」に追加

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

目次

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

Flutter assetsにディレクトリ・画像を追加1

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

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

ステップ2:pubspec.yamlにassetsを追加

Flutter assetsにディレクトリ・画像を追加2

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

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

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

Flutter assetsにディレクトリ・画像を追加3

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

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"),
          ),
        ),
      ),
    );
  }
}

以上です。

  • URLをコピーしました!
目次
閉じる