Flutter入門

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

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

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

Flutterで画像を表示する方法

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

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

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

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

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

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

  1. ローカルに保存した画像を表示する
    →Image.asset()を使う
  2. インターネットにアップロードされている画像を表示する
    →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'),
      ),
    );
  }
}

まとめ

今回はFlutterで画像を表示させる方法について解説しました。

  • ローカル画像を表示するときはImage.asset()
  • インタネット上の画像を表示するときはImage.network()

を使用しましょう。

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する