Flutterの画像表示方法 #Flutter #画像表示

お疲れ様です。

今回は、画像の表示方法を記述します。
※画像の表示のみを記事に記載します。画像の加工（オプション設定やウィジェットのラッピングによる加工）は別の記事に記載します。

Flutterの画像表示方法

• ローカルの画像表示
• ネットワーク上の画像表示

ローカルの画像表示

1. 表示したいファイル（画像）をプロジェクト内に格納
2. yamlファイルに「assets」と「表示したい画像のパスとファイル名」を追加
3. Imageウィジェットを使用して、画像を表示

以上です。
シンプルなのですが、yamlファイルの修正があるので、若干初心者キラーですよね。

具体例

前準備として、画像を格納するフォルダを作成する。
(今回は「images」と言うフォルダを作成して、その中に画像を格納します。)

画像1　画像用フォルダ

imagesフォルダに画像を格納します。

yamlファイルに「assets」と「表示したい画像のパスとファイル名」を追加します。
(yamlファイルは、インデント（空白）2つ単位で認識するので編集する際は気をつけてください。)
（Flutterプロジェクト作成時には、pubspec.yamlファイルに多くのコメントが記述されておりますが、かなり可読性を下げるので消すのも１つの方法です。）

pubspec.yaml

name: studyflutter
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
#  下記に行を追加
  assets:
    - images/TokyoTower.jpg

Imageウィジェットを使用して、画像を表示します。

*.dart

Center(
  child: Image(// Imageウィジェット
      image: AssetImage('images/TokyoTower.jpg')// 表示したい画像
  ),
),

結果

ネットワーク上の画像表示

1. Imageウィジェットを使用して、ネットワーク上のURLを参照して、その画像を表示

以上です。

具体例

Imageウィジェットを使用して、ネットワーク上のURLを参照して画像を表示します。

Center(
  child: Image(// Imageウィジェット
      image: NetworkImage('ここに任意のURLを設定'),// 表示したい画像
  ),
),

以上　ありがとうございました。

毎週、Flutter関連で情報発信するのでよろしくお願いします。
TO「先輩方」
ご意見ご鞭撻のほど、よろしくお願いいたします。
@kyota_kobayashi