現役エンジニアに悩みや疑問を30分間無料で質問し放題!

【Flutter】Imageの使い方|画像の表示・色のブレンド・表示方法の変更

今回は「Image」の基本的な使い方について紹介します。

Imageでは画像を表示させる以外にも色の合成、画像の表示方法を変更したりできます!

目次

下準備:ローカル画像をassetsに追加

Flutter assetsにディレクトリ・画像を追加1

ローカル画像を表示させたい方は先に画像をassetsに追加しておきましょう。

本記事ではFlutter公式が提供している「フクロウのオンライン画像」を使用します。パスは「https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg

Imageの基本コンストラクタ

Imageで画像を表示させる方法は2種類あります。

一度それぞれの方法で上のようにオンライン画像を表示させてみます。

方法1:imageプロパティで画像タイプに合わせる

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const Center(
          child: Image(
            image: NetworkImage(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
          ),
        ),
      ),
    );
  }

imageプロパティのNetworkImageでオンライン画像を指定します。

方法2:コンストラクタで画像タイプに合わせる(おすすめ!)

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Center(
          child: Image.network(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
        ),
      ),
    );
  }

コンストラクタに直接パスを書いてオンライン画像を指定できます。コードが短くなり、表示させたい画像タイプが一目で分かるのでこちらがおすすめです!

以後、後者の方法で基本プロパティの使い方を紹介します。

Imageの基本プロパティ

image(方法1の場合)

//ローカル画像を表示させる場合
Image(
  image: AssetImage('assets/images/blue-bird.png'),
)

//オンライン画像を表示させる場合
Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

実装できるWidget:AssetImage, FileImage, MemoryImage, NetworkImage, etc

height/width

heightプロパティで高さ、widthプロパティで横幅を指定します。片方の幅を指定すれば別の側面はレスポンシブ対応します。(fitプロパティを指定する場合は異なる場合がある)

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Center(
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
            width: 200,
          ),
        ),
      ),
    );
  }

color & colorBlendMode

画像に色をブレンドさせるにはcolorBlenadModeプロパティを使用します。画像に合成する色をcolorプロパティで指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Center(
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
            color: Colors.blue,
            colorBlendMode: BlendMode.softLight,
          ),
        ),
      ),
    );
  }

colorBlendModeには「BlendMode」を使用します。かなり種類があるのでドキュメントを一度チェックするのがおすすめです!

fit

fitプロパティを使えば、画像の高さだけheightに合わせて横幅をオリジナルのまま維持したりなど表示方法を指定できます。

//ソース(heightにだけ画像サイズを合わせる)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Center(
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
            width: 150,
            height: 300,
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
    );
  }

fitプロパティにはBoxFitを使用します。

以上です。

  • URLをコピーしました!
目次
閉じる