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

Image使い方
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • Image Widgetの基本的な使い方が知りたい

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

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

Image (Flutter Widget of the Week)
スポンサーリンク

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を引数として代入します。

NetwirkImage
引用元の画像はこちら

AssetImage

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

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

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

画像の保存方法

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

what is image
pubspec.yaml
childhは親要素に対して2スペース空ける

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

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

height/width

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

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

width あり
width あり
width なし
width なし
タイトルとURLをコピーしました