Flutter如何添加缓存管理组件-flutter_cache_manager

服务端技术精选 • 2024年5月5日下午5:27 • 技术分享 • 阅读 247

关注我，一起成长，一起变强。

1.flutter_cache_manager

官方链接见https://pub-web.flutter-io.cn/packages/flutter_cache_manager

支持Android/iOS/linux/MacOS/Web/Windows

2.pubspec.yaml添加依赖

    flutter_cache_manager: ^3.3.2

3.使用示例

3.1 缓存使用示例

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

class FlutterCacheManagerPage extends StatefulWidget {
  const FlutterCacheManagerPage({super.key});

  @override
  State<FlutterCacheManagerPage> createState() =>
      _FlutterCacheManagerPageState();
}

class _FlutterCacheManagerPageState extends State<FlutterCacheManagerPage> {
  final url =
      'https://u7.iqiyipic.com/image/20240328/b7/69/pv_2448711522921100_d_601_480_270.jpg';

  Stream<FileResponse>? fileStream;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('FlutterCacheManagerPage'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const Text('FlutterCacheManager的使用'),
              FutureBuilder(
                future: DefaultCacheManager().getSingleFile(url),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                  } else if (snapshot.hasData) {
                    return Image.file(snapshot.data!);
                  } else if (snapshot.hasError) {
                    debugPrint('Error: ${snapshot.error}');
                    return Text('Error: ${snapshot.error}');
                  }

                  return const CircularProgressIndicator();
                },
              ),
              const SizedBox(
                height: 20,
              ),
              ElevatedButton(
                onPressed: () async {
                  await DefaultCacheManager().emptyCache();
                },
                child: const Text('clear all cache file'),
              ),
              const SizedBox(
                height: 20,
              ),
              ElevatedButton(
                onPressed: () async {
                  await DefaultCacheManager().removeFile(url);
                },
                child: const Text('clear single cache file'),
              ),

            ],
          ),
        ));
  }
}

主要代码介绍

• FutureBuilder：是一个 Flutter 小部件，用于从异步操作中获取数据并构建界面。在本例中，它用于从 DefaultCacheManager().getSingleFile(url) 获取图片文件。FutureBuilder 的 builder 回调根据 snapshot 的状态显示不同的内容：如果连接状态是 ConnectionState.waiting，则不显示任何内容。如果 snapshot 有数据，则显示一个 Image.file 小部件，使用获取的文件数据来显示图片。如果 snapshot 有错误，则打印错误并显示一个文本错误消息。
• 第一个ElevatedButton按钮：用于清空所有缓存文件，当按下时，调用 DefaultCacheManager().emptyCache() 来清空缓存。
• 第二个ElevatedButton按钮：用于清除特定 URL 的缓存文件，当按下时，调用 DefaultCacheManager().removeFile(url) 来移除对应 URL 的缓存文件。