キャッシュされた画像を操作する

コンテンツ

場合によっては、画像をダウンロードしたときにキャッシュすると便利です。 Webなのでオフラインでも使えます。この目的のために、使用cached_network_imageパッケージ。

キャッシングに加えて、cached_network_imageパッケージはプレースホルダーとフェージング画像もサポートしていますロードされるときに入力します。

CachedNetworkImage(
  imageUrl: 'https://picsum.photos/250?image=9',
);

プレースホルダーの追加

のcached_network_imageパッケージを使用すると、任意のウィジェットをプレースホルダー。この例では、画像のロード中にスピナーを表示します。

CachedNetworkImage(
  placeholder: (context, url) => const CircularProgressIndicator(),
  imageUrl: 'https://picsum.photos/250?image=9',
),

完全な例

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    const title = 'Cached Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Center(
          child: CachedNetworkImage(
            placeholder: (context, url) => const CircularProgressIndicator(),
            imageUrl: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}