Flutter网络图片加载插件super_network_image的使用

简介

Super Network Image 是一个强大的Flutter插件，用于加载和缓存网络图片。它支持光栅和SVG格式，并提供先进的缓存功能和精确的缓存管理。

特性

• 自动检测图像类型：自动检测图像是光栅还是SVG，并相应地渲染。
• 缓存支持：缓存图片以提高性能并减少网络使用。
• 按图像和标签清除缓存：确保在Web平台上也能有效清除特定图像或一组图像的缓存。
• 自定义缓存时间：可以为图片设置全局或单独的缓存时间。
• 缓存标签：为图片分配标签进行分组缓存管理。
• 缓存管理：通过图像URL、标签或完全清除缓存，实现精确控制。
• 自定义占位符和错误部件：提供自定义部件用于加载和错误状态。
• 图像尺寸和适应：控制图像尺寸及其在容器中的适应方式。
• 加载源回调：确定图像是从缓存还是网络加载。
• 平台兼容性：无缝运行于移动和Web平台。

开始使用

安装

将 super_network_image 添加到项目的 pubspec.yaml 文件中：

dependencies:
  super_network_image: 0.0.2

然后运行：

flutter pub get

导入

import 'package:super_network_image/super_network_image.dart';

使用方法

基本用法

加载并显示网络图片：

SuperNetworkImage(
  url: 'https://example.com/image.jpg',
  width: 300,
  height: 300,
),

SVG图像支持

自动处理SVG图像：

SuperNetworkImage(
  url: 'https://example.com/image.svg',
  width: 300,
  height: 300,
),

自定义缓存时间

为图像设置自定义缓存时间：

SuperNetworkImage(
  url: 'https://example.com/image.jpg',
  cacheDuration: Duration(days: 1),
),

设置全局缓存时间：

void main() {
  SuperNetworkImageCache.configure(
    duration: const Duration(days: 7),
  );
  runApp(MyApp());
}

自定义占位符和错误部件

提供自定义部件用于加载和错误状态：

SuperNetworkImage(
  url: 'https://example.com/image.jpg',
  placeholderBuilder: () => Center(
    child: CircularProgressIndicator(),
  ),
  errorBuilder: () => Center(
    child: Text('Failed to load image'),
  ),
),

使用缓存标签

为图像分配标签：

SuperNetworkImage(
  url: 'https://example.com/image.jpg',
  tag: 'profile_pictures',
),

清除特定标签的缓存：

await SuperNetworkImageCache.clearCacheForTag('profile_pictures');

清除缓存

清除特定图像的缓存

await SuperNetworkImageCache.clearCachedImage('https://example.com/image.jpg');

清除所有缓存图像

await SuperNetworkImageCache.clearAllCachedImages();

加载源回调

确定图像是从缓存还是网络加载：

SuperNetworkImage(
  url: 'https://example.com/image.jpg',
  onLoad: (source) {
    if (source == ImageSource.cache) {
      print('Image loaded from cache');
    } else {
      print('Image loaded from network');
    }
  },
),

图像适应和尺寸

控制图像在其容器中的适应方式：

SuperNetworkImage(
  url: 'https://example.com/image.jpg',
  width: 300,
  height: 200,
  fit: BoxFit.cover,
),

示例Demo

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

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 设置全局缓存时间（可选）
  SuperNetworkImageCache.configure(
    duration: const Duration(days: 7),
  );

  runApp(SuperNetworkImageExampleApp());
}

class SuperNetworkImageExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Super Network Image Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExampleHomePage(),
    );
  }
}

class ExampleHomePage extends StatelessWidget {
  final List<ExampleItem> examples = [
    ExampleItem('Basic Usage', BasicUsageScreen()),
    ExampleItem('SVG Support', SvgSupportScreen()),
    ExampleItem('Caching Demonstration', CachingDemoScreen()),
    ExampleItem('Custom Placeholder and Error Widgets', CustomPlaceholderErrorScreen()),
    ExampleItem('Cache Tags', CacheTagsScreen()),
    ExampleItem('Image Fit and Sizing', ImageFitSizingScreen()),
    ExampleItem('Concurrent Image Loading', ConcurrentLoadingScreen()),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Super Network Image Examples'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await SuperNetworkImageCache.clearAllCachedImages();
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Cache cleared for all images')),
          );
        },
        tooltip: 'Clear All Cache',
        child: const Icon(Icons.delete),
      ),
      body: ListView.builder(
        itemCount: examples.length,
        itemBuilder: (context, index) {
          final example = examples[index];
          return ListTile(
            title: Text(example.title),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => example.screen),
              );
            },
          );
        },
      ),
    );
  }
}

class ExampleItem {
  final String title;
  final Widget screen;

  ExampleItem(this.title, this.screen);
}

// 这里可以添加具体的屏幕实现，如BasicUsageScreen等

以上代码展示了一个包含多个示例的主页面，用户可以选择不同的示例来查看 super_network_image 的不同功能。