surga Lab

開発したい!!

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

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

画像の表示

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

使う画像はもちろんいらすとやです。

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

URLの指定

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

Image.network(
            'https://cdn-ak.f.st-hatena.com/images/fotolife/h/hisurga/20190616/20190616231036.png'),

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

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

github.com

公式リファレンス

Image class - widgets library - Dart API