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

最終更新日

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

画像を表示する方法(手順)

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

yamlファイルの設定

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

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

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

プロジェクトの直下にフォルダ(ここでは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'),
        ],
      ),
    );
  }
}

結果/イメージ

参考

繰り返す

https://qiita.com/YashaWedyue/items/3d105f454d971a4b42f5

fem