アプリ内に登録した画像(assetsに登録した画像)を表示する方法です。
画像の表示
Flutterで画像を表示するにはいくつかの方法がありますが、
今回はアプリ内にあらかじめ画像を保管した画像を表示する方法になります。
使う画像は例によっていらすとやです。
1. 画像を保存するフォルダの作成
Flutterプロジェクト直下にフォルダを作成し、その中へ画像を保存します。
今回はファイル名をimagesとしましたが、他のフォルダ名にしても大丈夫です。
Android Studio上では思った通りにフォルダを作成できなかったので、私はターミナル上で作成しました。
2. pubspec.yamlの編集
pubspec.yamlのflutter:
に画像を追加します。
flutter: uses-material-design: true assets: - images/tv_talk.png
下記のように書くことで、フォルダごと登録することもできます。
flutter: uses-material-design: true assets: - images/
編集後はIDE右上に出てくるpackages get
で反映させることを忘れないようにしてください。
3. 画像の表示
画像はImage.asset
で画像を表示できます。
Image.asset('images/tv_talk.png'),
コード全体
シンプルな画像を表示するだけのアプリです。
import 'package:flutter/material.dart'; class MyImagePage extends StatefulWidget { MyImagePage({Key key, this.title}) : super(key: key); final String title; @override _MyImagePageState createState() => _MyImagePageState(); } class _MyImagePageState extends State<MyImagePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Image.asset('images/tv_talk.png'), ), ); } }
プロジェクトの全体像はGitHubに載せています。