【Flutter】画像を表示する方法
この記事では、Flutterで画像を表示する方法についてまとめました。
画像を表示する方法（手順）
- yamlファイルの設定
- プロジェクトに画像を組み込む
- コードで表示する
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'),
],
),
);
}
}結果/イメージ
参考
繰り返す
