【Flutter】画像を表示する方法

この記事では、Flutterで画像を表示する方法についてまとめました。

1 画像を表示する方法（手順）
2 使い方
3 サンプル
- 3.1 表示する画像
- 3.2 結果/イメージ

画像を表示する方法（手順）

yamlファイルの設定
プロジェクトに画像を組み込む
コードで表示する

yamlファイルの設定

yamlファイルにはassetの部分にプロジェクト直下から画像までのパスを書きます。

yamlファイルの設定についてはこちらでまとめています。

【Flutter】パッケージを追加/インストール/インポートする方法

プロジェクトに画像を組み込む

プロジェクトの直下にフォルダ（ここではimages）を作り、その中に表示したい画像を追加します。

コードで表示する

コードで表示するには、以下のようにして表示します。具体的な方法については、次章で紹介します。

使い方

Image.asset('画像のパス'),

サンプル

表示する画像

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
    title: 'My Flutter Demo',
    home: Scaffold(
        appBar: AppBar(
          title: Text('Image App'),
        ),
        body: ShowImageScreen()),
  ));
}

class ShowImageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Image.asset('images/cat.jpg'),
        ],
      ),
    );
  }
}