【5分でわかる】画像を表示する二つの方法

本記事では、Flutterで画像を表示させる方法について解説していきます。

Flutter入門者の方や、これから画像の表示を実装してみたい方は是非参考ください。

Flutterで画像を表示する方法
Imageウィジェットを実装してみる

1. ローカルに保存した画像を表示する
2. インターネット上の画像を表示する

まとめ

Flutterで画像を表示する方法

Flutterで画像を表示するにはImageウィジェットを使用します。

Image class - widgets library - Dart API

API docs for the Image class from the widgets library, for the Dart programming language.

Imageウィジェットは以下のように’image:’に設定されたパスを参照して画像を表示します。(以下の例ではインターネット上にアップロードされた画像を表示します。)

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

Imageウィジェットを実装してみる

では実際にImageウィジェットを使って画像を表示してみましょう。

今回は以下の二つのパターンについてご紹介します。

ローカルに保存した画像を表示する
→Image.asset()を使う
インターネットにアップロードされている画像を表示する
→Image.network()を使う

1. ローカルに保存した画像を表示する

ローカルに保存した画像を表示してみましょう。

ローカルに画像を保存する

プロジェクト直下に任意の名前でフォルダを作成し、そこに任意の画像を配置します。

今回は「Images」フォルダを作成します。

Imagesの配下にowl.jpegという以下の画像を保存します。

`pubspec.yaml`を編集する

pubspec.yamlに画像を読み込む設定を追加します。

assets配下に、追加した画像のパスを追加してください。

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

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

Imageウィジェットを実装して画像を参照する

今回はFlutterのデフォルトアプリであるカウンターアプリを変更します。

main.dartを以下のように変更してください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Image.asset('Images/owl.jpeg'),
      ),
    );
  }
}

この状態でプロジェクトを実行してみましょう。

以下のような結果になるかと思います。

2. インターネット上の画像を表示する

インターネット上の画像を表示する場合は、以下のようにImage.network()を使用して、参照先のURLを設定するだけで表示できます。

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

main.dartを以下のように変更してみてください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
      ),
    );
  }
}