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

コンテンツ

画像の表示は、ほとんどのモバイルアプリにとって基本です。 Flutter が提供するのは、Imageウィジェットへさまざまな種類の画像を表示します。

URL からの画像を操作するには、Image.network()コンストラクタ。

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

ボーナス: アニメーション GIF

便利な点が 1 つありますImageウィジェット: アニメーションGIFをサポートしています。

Image.network(
    'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif');

プレースホルダーとキャッシュ

デフォルトImage.networkコンストラクターはより高度なものを処理しません読み込み後の画像のフェードインや画像のキャッシュなどの機能ダウンロード後、デバイスにダウンロードされます。これらのタスクを実行するには、次を参照してください。以下のレシピ:

インタラクティブな例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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