Image を使って、画像を表示します。 インターネット上から画像を取ってきて表示したり、 アプリ内に埋め込んだ画像を表示できます。

画像の表示

画像の表示は、アプリにおいて、重要な要素の一つです。 しかし、 iOSAndroid アプリ開発において、かなり扱いが難しいことが多いです。

でも、心配は要りません。 Flutter では、非常に強力な画像表示のための Image というクラスが用意されています。 簡単な設定や短い記述だけで画像を表示することができます。

インターネット上から画像を表示する

HTTP サーバから、画像をダウンロードして表示するような場合、

Image.network('https://nzigen.com/flutter-reference/assets/img/samples/logo-jumper.png')

のようにします。

アセットから画像を表示する

まず、 3 つの大きさの画像 (1 倍、 2 倍、 3 倍の大きさ) を用意します。

そして、 Flutter プロジェクトの中に images フォルダを作ってその中に入れていきます。

1倍の画像は、 images/logo-jumper.png のように、 images フォルダ直下に入れます。

2倍の画像は、 images/2.0x/logo-jumper.png のように、2.0x フォルダに入れます。

3倍の画像は、 images/3.0x/logo-jumper.png のように、 3.0x フォルダに入れます。

3 つの大きさの画像を用意する理由は、デバイスの解像度によって出し分けを行うためです。 こうすることで、解像度の大きなデバイスでも画像がボケにくくなります。

iOSAndroid アプリ開発のときと命名が多少違います。画像を切り出すときに注意してください。

次に、 pubspec.yaml ファイルを編集します。 flutter ブロックの中に assets ブロックを作成し、その中に

flutter:
  assets:
  - images/logo-jumper.png

のように記述します。

これを忘れると、画像の表示はされません。

最後に、 Flutter のコードに、

Image.asset('images/logo-jumper.png')

と記述して完成です。

コードの例

例えば、コードは以下のようになります。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'わかりやすい'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.network('https://nzigen.com/flutter-reference/assets/img/samples/logo-jumper.png'),
          Image.asset('images/logo-jumper.png'),
        ],
      ),
    );
  }
}

スクリーンショット

参考リンク