Flutter Image Widget の入門:①画像の作成

Table of Contents

Table of Contents

【Flutter Image Widget の入門】

 👉①画像の作成

  ②color, colorBlendMode, matchTextDirection属性

  ③fit, alignment, repeat属性

Flutter Imageとは

Flutter ImageはFlutterが提供しているWidgetで、画像を表示する時に使います。 JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, WBMPの画像をImage Widgetを使えば表示できます。

Imageはよく使われているUIでもあり、属性の部分も多いなので、三つの入門編で紹介しようと思います。今回の本題は画像の作成について話します。

結論


公式のドキュメントからの整理です。


MethodDescription
Image()ImageProviderから画像を取得する。
Image.asset(String name)AssetBundlerの画像を取得する。
Image.network(String src)ネットワーク上の画像を取得する。
Image.file(File file)Fileから画像を取得する。
Image.memory(Uint8List bytes)メモリから画像を作成する。


画像読み取りの例

Image.asset()

画像ファイルのパスpubspec.yamlのassetの関連設定できたら、Image.asset()で画像取得できます。

Image.asset('assets/influencer.jpg')

AssetBundlerの画像を取得して表示します。 使う時に、画像ファイルのパスとpubspec.yamlのassetの関連設定は必要です。 まず、プロジェクトに画像ファイルを保存するフォルダを作成して、画像ファイルをその中に格納します。 下の図のように、assetsというフォルダを作成して、中に画像ファイル(influencer.jpgとか)を入れます。

project structure

その後、pubspec.yamlを編集します。 pubspec.yamlの中に、flutter の部分があります。 その中に、assets の記述を追加します。 これで先ほど作成したassets内のファイルをasset()関数で取得できます。 一つ特定ファイルのみ設定したい場合、そのファイルのパスだけ設定すれば良いです。

...
flutter:
  uses-material-design: true
  assets:
    - assets/
...

ネットワーク経由で画像を取得する

この方法は画像のURLがあれば、Image.network()関数で画像の表示ができます。

Image.network("https://via.placeholder.com/150")

Fileから画像を取得する

例えば、端末内の画像ファイルを表示したい時はこの方法で画像の作成できます。 下記の例は画像ファイルのパスからFileを読み込んでImageを作成する。

Image.file(new File("/path/of/file"))

メモリーの画像データで画像を作成する

メモリーの画像データを表示したい場合使えます。 例えば、一時的にメモリーに保存している画像を再表示する。

Image.memory(Uint8List bytes)

参考

https://api.flutter.dev/flutter/widgets/Image-class.html https://flutter.dev/docs/development/ui/assets-and-images