Flutter图片缓存插件fiona_image_cache的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter图片缓存插件fiona_image_cache的使用

功能

FionaImageCache 插件可以帮助你的应用在从 URI 获取图片时进行缓存。它会下载图片并保存到本地路径。下次应用读取同一张图片时，它将返回本地路径。

入门指南

使用该插件非常简单，你只需要定义一个缓存文件夹名称，用于保存下载的图片。

使用方法

你需要创建一个管理器，并指定要下载图片的本地路径：

// 创建缓存管理器
var fionaCache = FionaImageCache(cacheFolder: "image_cache");

然后在你的 Flutter 小部件中，你可以使用管理器从 URL 获取图片的本地路径。第一次调用时，缓存会从 URL 获取图片，下载并保存。下次使用相同的 URL 调用此方法时，缓存将返回图片的本地 URI。

// 从缓存中获取图片的本地路径
String imagePath = await fionaCache.getImagePath(url);

// 使用本地路径创建图片
Image image = Image.file(File(imagePath));

// 监听图片加载完成
image.image.resolve(ImageConfiguration()).addListener(
  ImageStreamListener((ImageInfo image, bool synchronousCall) {
    var myImage = image.image;
    Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
    // 这里可以处理图片加载完成后的逻辑
  }),
);

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 fiona_image_cache 插件来缓存和显示图片：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 图片缓存示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageCacheExample(),
    );
  }
}

class ImageCacheExample extends StatefulWidget {
  [@override](/user/override)
  _ImageCacheExampleState createState() => _ImageCacheExampleState();
}

class _ImageCacheExampleState extends State<ImageCacheExample> {
  final FionaImageCache fionaCache = FionaImageCache(cacheFolder: "image_cache");
  String url = "https://storage.googleapis.com/cms-storage-bucket/ec64036b4eacc9f3fd73.svg";
  String imagePath;

  [@override](/user/override)
  void initState() {
    super.initState();
    _loadImage();
  }

  Future<void> _loadImage() async {
    try {
      // 从缓存中获取图片的本地路径
      imagePath = await fionaCache.getImagePath(url);
      setState(() {});
    } catch (e) {
      print('Failed to load image: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 图片缓存示例'),
      ),
      body: Center(
        child: imagePath != null
            ? Image.file(File(imagePath))
            : CircularProgressIndicator(),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用fiona_image_cache插件来进行图片缓存的示例代码。fiona_image_cache是一个用于缓存网络图片的Flutter插件，它可以提高应用的性能，特别是在需要频繁加载相同图片的情况下。

首先，确保你已经在pubspec.yaml文件中添加了fiona_image_cache依赖：

dependencies:
  flutter:
    sdk: flutter
  fiona_image_cache: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，你可以在你的Flutter应用中这样使用fiona_image_cache：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fiona Image Cache Example'),
        ),
        body: Center(
          child: CachedImageDemo(),
        ),
      ),
    );
  }
}

class CachedImageDemo extends StatelessWidget {
  final String imageUrl = 'https://example.com/path/to/your/image.jpg';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 使用 FionaImageCacheWidget 来加载和缓存图片
        FionaImageCacheWidget(
          imageUrl: imageUrl,
          placeholder: CircularProgressIndicator(), // 加载中的占位符
          errorWidget: Icon(Icons.error), // 加载失败的错误图标
          builder: (context, imageProvider) {
            return Image(
              image: imageProvider,
              fit: BoxFit.cover,
              width: 300,
              height: 200,
            );
          },
        ),
        SizedBox(height: 20),
        // 你可以多次使用相同的 FionaImageCacheWidget 来确保图片被缓存
        FionaImageCacheWidget(
          imageUrl: imageUrl,
          placeholder: CircularProgressIndicator(),
          errorWidget: Icon(Icons.error),
          builder: (context, imageProvider) {
            return Image(
              image: imageProvider,
              fit: BoxFit.cover,
              width: 150,
              height: 100,
            );
          },
        ),
      ],
    );
  }
}

在这个示例中：

  1. FionaImageCacheWidget用于加载和缓存网络图片。
  2. imageUrl是你想要加载的图片的URL。
  3. placeholder是图片加载过程中显示的占位符。
  4. errorWidget是图片加载失败时显示的错误图标。
  5. builder是一个函数，它接收一个BuildContext和一个ImageProvider，并返回一个使用该ImageProvider的Image小部件。

FionaImageCacheWidget会确保相同URL的图片只会被下载一次，并在之后的请求中从缓存中加载，从而提高性能。

请注意，fiona_image_cache插件的API可能会随着版本的更新而变化，因此建议查阅最新的文档以获取最准确的信息。

回到顶部