【画像多めで説明】FlutterのImageウィジェットで画像を挿入する方法

初めに
手順

初めに

今回はFlutterで画像を表示させるための方法を紹介していきます。
以下の手順に則り説明を進めていきます。

さていきましょう！

手順

描画する画像のフォルダを作成する
画像を表示するコードを記述する
pubspec.yamlを編集
pub getを実行
プロジェクトをリビルドする

描画する画像のフォルダを作成する

まずは画面に描画したい画像を格納しておくフォルダを作成します。

正直ディレクトはなんでもいいのですが、分かりやすいかつみんながそうしている一方法で紹介していきます。

flutterのプロジェクトホーム内に「assets/images/」という新しいディレクトを作成します。

ちなみに、VSCodeを使っている方はフォルダにプラスがついているアイコンをクリックすると、
ディレクトリを作成することができます。

以下はディレクトリを作成した様子です。

アプリのホームディレクトリに「assets/images」というディレクトリを作成する様子

先ほど作成した「assets/images」ディレクトリに画像を挿入しておきましょう。

今回は「background_2.jpg」というファイルを描画することとします。

以下は画像を格納した様子です。

画像を表示するコードを記述する

次に画像を表示させるためのコードをImageウィジェットで記述していきます。

今回は画像を表示させることを目的としているのですごく寂しく役に立たないコードですが、この要領で画像を描画できるということを覚えていただけると幸いです。

import 'package:flutter/material.dart';
import 'package:shop_app/screens/home_screen.dart';
import 'package:shop_app/theme.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Food UI Kit',
      theme: buildThemeData(),
      home: Scaffold(
        body: Center(
          child: Image.asset(
            'assets/images/background_2.jpg',
          ),
        ),
      ),
    );
  }
}

Image.asset()の引数にこのFlutterプロジェクトのホームディレクトからのディレクトリパスを入力してください。

よくわからなければ、とりあえず私の記述した「background_2.jpg」に自分の画像のファイル名に入れ替えてください。

ホームから画像の相対パスはVSCodeだと、