[Flutter] Imageウィジェット

概要

Flutterを使ってアプリを開発してみようかと思います。今回のブログポストではFlutterでイメージを表示する方法について説明します。

このブログポストで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/widget

ローカルイメージ表示

Flutterでローカルイメージを表示するため、まずイメージを保存するフォルダが必要です。フォルダの名前は何でもいいですが、ここではassetsと言う名前を使いました。

それじゃ、プロジェクトのフォルダ中にassetsフォルダを生成します。

flutter create my_app
cd my_app
mkdir assets

そして当該フォルダに画面に表示したイメージをコピーします。

Flutterで画面にイメージを表示するためにはイメージファイルまたはフォルダをpubspec.yamlに作成する必要があります。

そしたら、pubspec.yamlファイルを開いて下記のような部分を探します。

# To add assets to your application, add an assets section, like this:
# assets:
#   - images/a_dot_burr.jpeg
#   - images/a_dot_ham.jpeg

イメージファイルを追加するためには次のようにコメントを修正します。

# To add assets to your application, add an assets section, like this:
assets:
  - assets/bunny.gif
  - assets/profile.png

上のようにイメージファイルを一つづつ指定してもいいですが、下記のように当該フォルダを指定しても良いです。

# To add assets to your application, add an assets section, like this:
assets:
  - assets/

そしたら保存したファイルを画面に表示するため下記のようにmain.dartファイルを修正します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image'),
      ),
      body: Center(
        child: Image(image: AssetImage('assets/profile.png')),
      ),
    );
  }
}

イメージを表示するためには下記のようにImageウィジェットを使います。ローカルイメージを使う時にはAssetsImageウィジェットを使うし、表示したいローカルイメージを指定します。

Image(image: AssetImage('assets/profile.png'))

このようにmain.dartファイルを修正してFlutterプロジェクトを実行すると次のようにローカルイメージがうまく表示されることが確認できます。

次のようにImageウィジェットの色んなオプションを使ってイメージを表示することができます。

Image(
  image: AssetImage('assets/profile.png'),
  width: 200,
  height: 100,
  fit: BoxFit.fill,
)

または下記のように使うこともできます。

Image.asset('assets/profile.png')

次のようにオプションを使うこともできます。

Image.asset(
  'assets/profile.png',
  width: 200,
  height: 100,
  fit: BoxFit.fill,
)

@2x, @3x

色んな解像度をサポートするため、普通イメージを作る時2x、3xのイメージも生成して使います。Flutterでは2x、3xの解像度のイメージを使うためには次のように2.0xフォルダと3.0xフォルダを生成する必要があります。

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

このように同じ名前のファイルを各フォルダに保存するとFlutterはこれを認識して解像度にあうイメージを自動で使います。

ネットワークイメージ

次はサーバにあるイメージを表示する方法について説明します。ネットワークにあるイメージを表示するためには次のようにAssetImage代わりにNetworkImageウィジェットを使います。

Image(
  image: NetworkImage(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  ),
),

次のようなオプションも使えます。

Image(
  image: NetworkImage(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  ),
  width: 200,
  height: 100,
  fit: BoxFit.fill,
),

ローカルイメージみたいに次のように使うこともできます。

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
)

次のようにオプションを使うこともできます。

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  width: 200,
  height: 100,
  fit: BoxFit.fill,
),

完了

これでFlutterでローカルイメージとネットワークイメージを表示するためAssetsImageとNetworkImageウィジェットを使う方法についてみてみました。また、ImageウィジェットのNamedコンストラクトを使ってローカルイメージとネットワークイメージを表示する方法についてもみてみました。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！