[読書会]インターネット上の画像の表示

 Flutter アプリでインターネットから画像を表示する方法について触れています。

1.インターネットからの画像表示

 Flutter では、Image ウィジェットを使って画像を表示します。
特に、インターネット上の画像を表示したい場合は、Image.network() コンストラクタを使用します。
(例えば、以下の様に書くと、指定した URL の画像が表示されます。)

Image.network() コンストラクタを使用して、インターネット上の画像を表示する(例):
Image.network('https://picsum.photos/250?image=9'),

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

 Image ウィジェットは、通常の画像だけでなく、アニメーション GIF もサポートしています。
これは、動く画像(アニメーション)を簡単に表示できるため、非常に便利です。
(例えば、以下のコードでアニメーション GIF を表示できます。)

同様に、アニメーション GIF を表示する(例):
Image.network(
    'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif');

3.フェードイン効果を持つプレースホルダー付き画像

 通常の Image.network コンストラクタでは、画像の読み込み後にフェードインするなどの高度な機能はサポートされていません。画像が読み込まれる前にプレースホルダー(読み込み中に表示する一時的な画像)を表示し、その後フェードインさせるような機能を実装したい場合は、Fade in images with a placeholder のページを参照すると良いです。

4.インタラクティブな例

インターネットから画像を読み込み表示する(例):
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,  //MaterialAppのタイトルを設定
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),  //AppBarにタイトルを設定
        ),
        //インターネットから画像を読み込み表示する
        //これは、インターネット上の画像を指定したURLから
        //読み込んで表示するための行です。
        //Image.network() コンストラクタは、
        //Flutterでインターネットから画像を表示する際に使用します。
        body: Image.network(
          'https://picsum.photos/250?image=9'),
      ),
    );
  }
}

コメントを残す