Flutter URL指定で画像を表示する

June 18, 2019

Flutter アプリでインターネット上の画像を表示する方法です。

画像の表示

インターネットから取ってきた画像を表示するシチュエーションはよくありますが、URL 指定で簡単に対応することができます。

URL の指定

Image.networkで URL 指定するだけです。

Image.network(
            'https://cdn-ak.f.st-hatena.com/images/fotolife/h/hisurga/20190616/20190616231036.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.network(
            'https://example.png'),
      ),
    );
  }
}

プロジェクトの全体像は GitHub に載せています。

https://github.com/hikiit/flutter-samples/tree/master/flutter_image

公式リファレンス

https://api.flutter.dev/flutter/widgets/Image-class.html


Profile picture

Twitter GitHub