アプリ内に登録した画像(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;
_MyImagePageState createState() => _MyImagePageState();
}
class _MyImagePageState extends State<MyImagePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Image.asset('images/tv_talk.png'),
),
);
}
}プロジェクトの全体像は GitHub に載せています。
https://github.com/hikiit/flutter-samples/tree/master/flutter_image