[Flutter] Image って何？

2023年4月15日2023年11月24日

FlutterはGoogleによって開発されたオープンソースのフレームワークで、モバイルアプリケーションの開発に使用されます。Flutterには、画像を表示するためのWidgetがあります。この記事では、FlutterのImage Widgetについて、使い方や機能などを詳しく説明します。

FlutterのImage Widgetとは

FlutterのImage Widgetは、画像を表示するためのWidgetです。Flutterは、ネットワークから画像を読み込んだり、ローカルファイルから画像を読み込んだりすることができます。Image Widgetは、画像のサイズを自動的に調整することができます。

Image を読み込むための事前準備

Flutterプロジェクトに画像ファイルを追加するには、pubspec.yaml ファイルに画像ファイルのパスを追加する必要があります。以下は、pubspec.yaml ファイルに画像ファイルを追加する例です。

flutter:
  assets:
    - images/background.png

FlutterのImage Widgetの使い方

画像はローカルまたは、ネットワークから読み込みを行います。以下はローカルファイルを読み込む場合を例に記載していますが、ネットワーク画像の読み込みも同様に可能です。

ローカルファイルを読み込む

画像を読み込む

画像を読み込むには、以下のようにImage.asset、Image.network、Image.fileなどのメソッドを使用します。例えば、images/background.pngというローカル画像を読み込む場合は、次のようになります。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Image',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Image Widget'),
          ),
          body: Center(
            child: Image.asset('images/background.png'),
          ),
        ));
  }
}

以降のサンプルコードの記載は “Image.asset…” の部分のみ抜粋して記載します。

画像のサイズを指定する

画像のサイズを指定するには、widthとheightプロパティを使用します。例えば、画像の幅を200、高さを100に指定する場合は、次のようになります。

Image.asset(
  'images/background.png',
  width: 200,
  height: 100,
),

画像の配置を指定する

画像の配置を指定するには、fitプロパティを使用します。fitプロパティには、BoxFit.contain、BoxFit.cover、BoxFit.fillなどがあります。例えば、画像を中央に配置し、画像のアスペクト比を保持する場合は、次のようになります。

Image.asset(
  'images/background.png',
  fit: BoxFit.contain,
),

ネットワークから画像を読み込む

Image.networkメソッドを使用することで、ネットワークから画像を読み込むことができます。例えば、以下のようになります。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Image',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Image Widget(network)'),
          ),
          body: Center(
              child: Image.network(
                  'https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png')),
        ));
  }
}

FlutterのImage Widgetの機能

FlutterのImage Widgetには、以下のような機能があります。

1. 画像のキャッシュ

Image Widgetは、画像をキャッシュすることができます。キャッシュにより、同じ画像を何度も読み込む必要がなくなり、アプリのパフォーマンスが向上します。キャッシュを有効にするには、cacheWidthとcacheHeightプロパティを設定します。これらのプロパティには、画像を表示するために必要な最小限のサイズを指定します。例えば、画像の幅が400ピクセル未満の場合、キャッシュされた画像が使用されます。

Image.network(
  'https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png',
  cacheWidth: 400,
)

2. 画像のエラー時の表示

Image Widgetは、画像が読み込めない場合に、エラー画像を表示することができます。errorBuilderプロパティを使用することで、エラー画像を指定することができます。例えば、次のようになります。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Image',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Image Widget(network error)'),
          ),
          body: Center(
              child: Image.network(
            'hxxps://xxx.yyy.zzz/sapmle/networkimg/load.png',
            errorBuilder: (context, error, stackTrace) {
              return Image.asset('images/error.png');
            },
          )),
        ));
  }
}

3.上記以外のプロパティ

上記、cacheWidth、errorBuilder以外のプロパティは以下のとおりです。

width: イメージの幅をピクセル単位で指定します。
height: イメージの高さをピクセル単位で指定します。
fit: イメージを表示するウィジェットのサイズに合わせるための調整方法を指定します。デフォルトはBoxFit.containで、ウィジェット内に完全にフィットするようにイメージを拡大または縮小します。
alignment: イメージをウィジェット内でどのように配置するかを指定します。デフォルトは中央に配置されます。
repeat: イメージを繰り返し表示する方法を指定します。デフォルトはImageRepeat.noRepeatで、イメージを繰り返し表示しません。
filterQuality: イメージの品質を指定します。デフォルトはFilterQuality.lowで、画像の品質を最適化します。
semanticLabel: イメージの代替テキストを指定します。アクセシビリティの向上に役立ちます。

まとめ

この記事では、FlutterのImage Widgetについて、使い方や機能などを紹介しました。Image Widgetは、ネットワークから画像を読み込んだり、ローカルファイルから画像を読み込んだりすることができ、画像のサイズや配置、キャッシュ、読み込み中の表示、エラー時の表示など、様々な機能があります。これらの機能を使いこなして、アプリ開発をより効率的に行いましょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！