【Flutter】Imageの基本的な使い方

Imageを使えば、画像を表示させることができます。

\ Widgetの扱い方が不安な方はこちら！ /

【Flutter】Widget・Widgetツリーの基本的な仕組み ｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

flutternyumon.com

2021.04.14

Imageの基本となるプロパティ

• image：表示したい画像と画像元を指定します。
• height/width：Containerの高さ/幅を指定します。

image

imageプロパティで、表示させる画像と画像元を指定します。また、imageプロパティの引数に画像元を指定するAssetImage, NetworkImage, FileImage, MemoryImageのいずれかを代入した後で、表示させる画像を指定します。

• AssetImage
• NetworkImage
• FileImage
• MemoryImage

今回はFlutterで使われる機会の多い「NetworkImage」と「AssetImage」を紹介します。

NetworkImage

Image(
  image: NetworkImage('https://flutternyumon.com/wp-content/uploads/2021/04/Flutter-Theme-3.png'),
),

NetworkImageは、Webブラウザ上にある画像を表示できます。使用するにはNetworkImageのコンストラクタで、画像元となるURLを引数として代入します。

AssetImage

Image(
  image: AssetImage('images/website_logo.png'),
),

AssetImageは、Flutterアプリのフォルダに保存しておいた画像を使用を表示できます。使用するにはAssetImageのコンストラクタで「’フォルダ名/画像名’」を引数として代入します。

また、AssetImageを使用するには、先に画像をフォルダに保存しておく必要があります。

画像の保存方法

動画のように画像を保存するフォルダを生成し、使用する画像をフォルダに保存します。(フォルダ名をimagesにしています)

pubspec.yamlファイルを開き、動画のように「assets」のchildに「- フォルダ名/」を追加します。そして「Pub get」をクリックし、pubspec.yamlファイルを更新します。

これでフォルダに保存した画像をAssetImageで使用できます。

height/width

Image(
  width: 200,
  image: AssetImage('images/website_logo.png'),
),

heightプロパティでimageの高さ、widthプロパティで幅を指定します。