[Flutter] Assetsでローカルの画像を表示する

第二回目の記事はFlutterでアプリ内の画像(Assets)を表示する方法です！
背景画像や自身のアイコン画像など、表示するものがあらかじめ決まっている場合におすすめです。
アプリ内に保存しておくことで描画するたびに通信が発生することがなく、画面の描画がスムーズになったり通信量の削減ができます。

画像をプロジェクトに配置

プロジェクト直下にassetsフォルダを作成して、その中に画像を配置します。
このように配置されていたら大丈夫です！

pubspec.yaml に追記

先ほどのassetsフォルダ内のデータを読み込ませるために、pubspec.yamlにassetsの存在を教えてあげます。
さきほどの画像の下の方に見えているpubspec.yaml を開いてください。
青と緑の文字が並んでいると思いますので、一番下までスクロールして flutter: という項目を探してください。
見つかりましたら、下記のようにassetsのフォルダまたはファイル単位で指定します。
フォルダを指定した場合はそのフォルダ直下のファイル全てがアプリ内で使用できるようになります。
今回は画像を1枚のみ使用するため、どちらかだけでOKです！

# The following section is specific to Flutter packages.
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # --------------------- ここを追記 ---------------------
  assets:
    - assets/                 # フォルダ内のファイル全てを指定
    - assets/icon_image.webp  # ファイル1つのみを指定
  # -----------------------------------------------------

画像を表示するウィジェットを作成する

アセット内の画像を表示する方法は2種類あります。

AssetImageを使用する

前回の記事にも出てきたContainerのdecorationで画像をしていする方法です。
私の場合はicon_image.webpという名前の画像を配置したため、このようなContainerを作成します。

// ---------- AssetImageの例 ----------
Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/icon_image.webp"),
    ),
  ),
);

Image.assetを使用する

画像を描画するためのImageウィジェットがFlutterには用意されています。
用意した画像のパスを指定するだけですのでお手軽に使用できます。
表示するサイズを変えたい場合にはContainerやSizedBoxの子ウィジェットにする必要があるので、上記のAssetImageとお好みで使用してください

// ---------- Image.assetの例 ----------
Image.asset("assets/icon_image.webp");

全体コード

最後に紹介した二種類の方法で画像を表示するデモの例を紹介します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final String imagePath = "assets/icon_image.webp";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Center(child: Text("Asset Image demo")),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              children: [
                // ---------- AssetImageの例 ----------
                Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(imagePath),
                    ),
                  ),
                ),
                // ------------------------------------
                Text("AssetImage"),
              ],
            ),
            const SizedBox(width: 30),
            Column(
              children: [
                // ---------- Image.assetの例 ----------
                Container(
                  height: 100,
                  width: 100,
                  child: Image.asset(imagePath),
                ),
                // ------------------------------------
                Text("Image.asset"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}