Flutter アプリに内蔵されている画像を表示する

アプリ内に登録した画像(assetsに登録した画像)を表示する方法です。

画像の表示

Flutterで画像を表示するにはいくつかの方法がありますが、
今回はアプリ内にあらかじめ画像を保管した画像を表示する方法になります。

使う画像は例によっていらすとやです。

f:id:hisurga:20190616231036p:plain:w200

1. 画像を保存するフォルダの作成

Flutterプロジェクト直下にフォルダを作成し、その中へ画像を保存します。

今回はファイル名をimagesとしましたが、他のフォルダ名にしても大丈夫です。

f:id:hisurga:20190616232807p:plain

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'),

f:id:hisurga:20190616225641p:plain:w300

コード全体

シンプルな画像を表示するだけのアプリです。

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'),
      ),
    );
  }
}