Flutterで画像を表示する方法

概要

Flutterでの画像の表示方法をなるべく分かりやすく書きます
対象読者:flutter初心者
環境:

macOS
エディタ:vscode
% flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (3 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

結論:

手順

assetsフォルダ作成

• ルートに assets/imagesフォルダを作成し、任意のサンプル画像「lake.jpg」を追加（画像①）

pubspec.yamlを修正

• ルートに置かれたpubspec.yamlを開く（画像②）
• pubspec.yamlを修正（画像③）
  • # To add assets to your application, ~~~ 下のassetsのコメントアウト解除する
  • その行の下に「- assets/images/」を追記

# The following section is specific to Flutter packages.
flutter:
〜〜〜中略〜〜〜
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/  

main.dart修正

今回は詳細なコードは省略しますが、下記のようなコードをmain.dartに追記してください

Image.asset(
  'assets/images/lake.jpg',
  fit: BoxFit.cover,
),

確認

サンプル画像が表示されました。