【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'), ], ), ); } }
結果/イメージ

参考
繰り返す