Flutter图片缓存与网络加载插件fast_cached_network_image

Flutter图片缓存与网络加载插件fast_cached_network_image_plus的使用

简介

fast_cached_network_image_plus 是一个Flutter插件，扩展了 Fast Cached Network Image 的功能，用于快速缓存网络图片，而无需依赖原生代码。该插件引入了增强功能，允许通过URL和唯一ID保存图片，确保即使URL发生变化，图片仍然可以有效缓存。它还提供了内置的加载器、错误处理和渐变淡入效果，提供无缝的图片缓存体验。

截图

演示动图

使用方法

1. 导入插件

首先，在你的Dart文件中导入 fast_cached_network_image_plus 插件：

import 'package:fast_cached_network_image_plus/fast_cached_network_image_plus.dart';

2. 设置存储位置

使用 path_provider 设置图片缓存的存储位置：

String storageLocation = (await getApplicationDocumentsDirectory()).path;

3. 初始化缓存配置

初始化缓存配置，设置缓存清理的时间间隔（默认为7天）：

await FastCachedImagePlusConfig.init(
  subDir: storageLocation, 
  clearCacheAfter: const Duration(days: 15)
);

4. 使用 `FastCachedImagePlus` 作为Widget

在需要显示图片的地方使用 FastCachedImagePlus Widget：

child: FastCachedImagePlus(url: url)

属性说明

errorBuilder: 当图片加载失败时显示的自定义Widget。

errorBuilder: (context, exception, stacktrace) {
  return Text(stacktrace.toString());
},

loadingBuilder: 显示图片下载进度的自定义Widget。

loadingBuilder: (context, progress) {
  return Container(
    color: Colors.yellow,
    child: Stack(
      alignment: Alignment.center,
      children: [
        if (progress.isDownloading && progress.totalBytes != null)
          Text('${progress.downloadedBytes ~/ 1024} / ${progress.totalBytes! ~/ 1024} kb',
              style: const TextStyle(color: Colors.red)),
        SizedBox(
            width: 120,
            height: 120,
            child: CircularProgressIndicator(
                color: Colors.red, value: progress.progressPercentage.value)),
      ],
    ),
  );
},

fadeInDuration: 设置图片从加载到显示的渐入时间，默认为500毫秒。
```
fadeInDuration: const Duration(seconds: 1);
```

检查图片是否已缓存:

FastCachedImagePlusConfig.isCached(imageUrl: url));
// 或者使用唯一名称
FastCachedImagePlusConfig.isCached(imageUniqueName: imageUniqueName));

删除缓存图片:

FastCachedImagePlusConfig.deleteCachedImage(imageUrl: url);
// 或者使用唯一名称
FastCachedImagePlusConfig.deleteCachedImage(imageUniqueName: imageUniqueName);

清除所有缓存图片:

FastCachedImagePlusConfig.clearAllCachedImages();

使用缓存图片作为ImageProvider:
```
FastCachedImagePlusProvider(url);
```

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 fast_cached_network_image_plus 插件：

import 'package:fast_cached_network_image_plus/fast_cached_network_image_plus.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化缓存配置，设置缓存清理时间为15天
  await FastCachedImagePlusConfig.init(
      clearCacheAfter: const Duration(days: 15));

  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String url1 =
      'https://cdn-images-1.medium.com/v2/resize:fit:87/1*XrbUBnZb-Vp9jRDGqU-BXQ@2x.png';

  bool isImageCached = false;
  String? log;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: const Text('Fast Cached Image Plus'),
          centerTitle: true,
          backgroundColor: Colors.deepPurple,
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 图片卡片设计
                Card(
                  elevation: 5,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15)),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15),
                    child: SizedBox(
                      height: 150,
                      width: 150,
                      child: FastCachedImagePlus(
                        // 可以使用唯一名称进行缓存
                        // imageUniqueName: "image1",
                        url: url1,
                        fit: BoxFit.cover,
                        fadeInDuration: const Duration(seconds: 1),
                        errorBuilder: (context, exception, stacktrace) {
                          return const Center(
                            child: Text('Failed to load image',
                                style: TextStyle(color: Colors.red)),
                          );
                        },
                        loadingBuilder: (context, progress) {
                          return Container(
                            color: Colors.grey[300],
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                if (progress.isDownloading &&
                                    progress.totalBytes != null)
                                  Text(
                                      '${progress.downloadedBytes ~/ 1024} / ${progress.totalBytes! ~/ 1024} kb',
                                      style:
                                          const TextStyle(color: Colors.black)),
                                SizedBox(
                                  width: 60,
                                  height: 60,
                                  child: CircularProgressIndicator(
                                    color: Colors.deepPurple,
                                    value: progress.progressPercentage.value,
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 20),
                // 缓存状态信息
                Text(
                  'Is image cached? = $isImageCached',
                  style: const TextStyle(
                      fontSize: 16, color: Colors.deepPurpleAccent),
                ),
                const SizedBox(height: 12),
                Text(
                  log ?? '',
                  style: const TextStyle(fontSize: 14, color: Colors.grey),
                ),
                const SizedBox(height: 20),
                // 检查缓存按钮
                ElevatedButton.icon(
                  onPressed: () async {
                    setState(() =>
                        isImageCached = FastCachedImagePlusConfig.isCached(url: url1));
                  },
                  icon: const Icon(Icons.check_circle),
                  label: const Text('Check Image Cache'),
                  style: ElevatedButton.styleFrom(
                    foregroundColor: Colors.white,
                    backgroundColor: Colors.deepPurple,
                    padding: const EdgeInsets.symmetric(
                        vertical: 12, horizontal: 24),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                  ),
                ),
                const SizedBox(height: 12),
                // 删除缓存图片按钮
                ElevatedButton.icon(
                  onPressed: () async {
                    await FastCachedImagePlusConfig.deleteCachedImage(url: url1);
                    setState(() => log = 'Deleted image $url1');
                    await Future.delayed(const Duration(seconds: 2),
                        () => setState(() => log = null));
                  },
                  icon: const Icon(Icons.delete),
                  label: const Text('Delete Cached Image'),
                  style: ElevatedButton.styleFrom(
                    foregroundColor: Colors.white,
                    backgroundColor: Colors.redAccent,
                    padding: const EdgeInsets.symmetric(
                        vertical: 12, horizontal: 24),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                  ),
                ),
                const SizedBox(height: 12),
                // 清除所有缓存图片按钮
                ElevatedButton.icon(
                  onPressed: () async {
                    await FastCachedImagePlusConfig.clearAllCachedImages(showLog: true);
                    setState(() => log = 'All cached images deleted');
                    await Future.delayed(const Duration(seconds: 2),
                        () => setState(() => log = null));
                  },
                  icon: const Icon(Icons.clear_all),
                  label: const Text('Clear All Cached Images'),
                  style: ElevatedButton.styleFrom(
                    foregroundColor: Colors.white,
                    backgroundColor: Colors.orangeAccent,
                    padding: const EdgeInsets.symmetric(
                        vertical: 12, horizontal: 24),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter图片缓存与网络加载插件fast_cached_network_image_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼•8 天前

更多关于Flutter图片缓存与网络加载插件fast_cached_network_image_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用fast_cached_network_image_plus插件进行图片缓存与网络加载的示例代码。这个插件是对cached_network_image的一个增强版本，提供了更好的性能和更多的功能。

步骤 1: 添加依赖

首先，你需要在pubspec.yaml文件中添加fast_cached_network_image_plus的依赖：

dependencies:
  flutter:
    sdk: flutter
  fast_cached_network_image_plus: ^x.x.x  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

步骤 2: 导入包

在你的Dart文件中导入fast_cached_network_image_plus包：

import 'package:fast_cached_network_image_plus/fast_cached_network_image_plus.dart';

步骤 3: 使用FastCachedNetworkImage

下面是一个简单的示例，展示如何使用FastCachedNetworkImage来加载和缓存网络图片：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String imageUrl =
      'https://example.com/path/to/your/image.jpg';  // 替换为你的图片URL

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fast Cached Network Image Plus Demo'),
      ),
      body: Center(
        child: FastCachedNetworkImage(
          imageUrl: imageUrl,
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
          fit: BoxFit.cover,
          width: 300,
          height: 200,
        ),
      ),
    );
  }
}

参数说明

imageUrl: 网络图片的URL。
placeholder: 在图片加载时显示的占位符Widget，这里使用了一个CircularProgressIndicator。
errorWidget: 当图片加载失败时显示的Widget，这里使用了一个错误图标。
fit: 图片的适应模式，这里使用了BoxFit.cover。
width 和 height: 图片的宽度和高度，可以根据需要调整。

额外功能

fast_cached_network_image_plus还提供了许多其他功能，比如自定义缓存目录、配置缓存大小、支持WebP格式等。你可以查阅官方文档获取更多详细信息和高级用法。

希望这个示例代码能帮助你开始在Flutter项目中使用fast_cached_network_image_plus进行图片缓存与网络加载。

Flutter图片缓存与网络加载插件fast_cached_network_image_plus的使用