Display images from the internet

Displaying images is fundamental for most mobile apps.

画像の表示は、ほとんどのモバイルアプリにとって基本的なものです。

Flutter provides the Image widget to display different types of images.

Flutter は、さまざまな種類の画像を表示するImageウィジェットを提供します。

To work with images from a URL, use the Image.network() constructor.

URL からイメージを操作するには、Image.network()コンストラクターを使用します。

Image.network('https://picsum.photos/250?image=9')

Bonus: animated gifs

One useful thing about the Image widget: It supports animated gifs.

Imageウィジェットについての1つの有用なこと:ImageウィジェットはアニメーションGIFをサポートしています

Image.network('https://github.com/flutter/plugins/raw/master/packages/video_player/video_player/doc/demo_ipod.gif?raw=true');

The default Image.network constructor doesn’t handle more advanced functionality, such as fading images in after loading, or caching images to the device after they’re downloaded.

既定のImage.networkコンストラクターは、読み込み後にイメージをフェードインしたり、ダウンロード後にデバイスにイメージをキャッシュしたりするなど、より高度な機能を処理しません。

To accomplish these tasks, see the following recipes:

これらのタスクを実行するには、次のレシピを参照してください。

Fade in images with a placeholder

Work with cached images

Interactive example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network('https://picsum.photos/250?image=9'),
      ),
    );
  }
}

参考

https://flutter.dev/docs/cookbook/images/network-image