Flutter渐进式加载图片插件flutter_progressive_image的使用

简介

flutter_progressive_image 是一个用于 Flutter 的渐进式图片加载插件。它允许你在图片加载过程中显示低质量的预览图，从而提升用户体验。

版本信息

预览

渐进式加载	普通加载
📺 渐进式加载演示视频	📺 普通加载演示视频

支持的图片格式

• ✅ jpeg/jpg
• ❌ png
• ❌ gif

使用方法

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_progressive_image: ^0.0.5

基本用法

Image(
  image: ProgressiveImage(url),
)

支持的参数

注意：默认的 imageLoader 不支持持久化缓存。

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_progressive_image 插件来实现渐进式图片加载，并显示加载进度。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_progressive_image/flutter_progressive_image.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final url =
      'https://raw.githubusercontent.com/fingerart/flutter_progressive_image/main/arts/example_progressive_image.jpg';

  double? progress;

  @override
  void initState() {
    super.initState();
    _startListenProgress();
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Progressive image example'),
        ),
        body: Column(
          children: [
            const SizedBox(height: 15),
            Expanded(
              child: Image(
                image: ProgressiveImage(url),
                frameBuilder: _buildFrameBuilder,
                errorBuilder: _buildImageError,
              ),
            ),
            SizedBox(
              width: double.infinity,
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SizedBox.square(
                      dimension: 20,
                      child: CircularProgressIndicator(
                        value: progress,
                        strokeWidth: 2,
                      ),
                    ),
                    const SizedBox(height: 5),
                    Text(
                      'Loading: ${((progress ?? 0) * 100).toInt()}%',
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildImageError(
    BuildContext context,
    Object error,
    StackTrace? stackTrace,
  ) {
    debugPrint(error.toString());
    debugPrintStack(stackTrace: stackTrace);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Icon(Icons.image_not_supported_outlined),
        const SizedBox(height: 5),
        Text(error.toString(), style: const TextStyle(color: Colors.red))
      ],
    );
  }

  Widget _buildFrameBuilder(
    BuildContext context,
    Widget child,
    int? frame,
    bool wasSynchronouslyLoaded,
  ) {
    return frame == null
        ? const Center(
            child: CircularProgressIndicator(strokeWidth: 2),
          )
        : child;
  }

  void _startListenProgress() {
    var streamListener = ImageStreamListener(
      (image, synchronousCall) {},
      onChunk: (event) {
        if (event.expectedTotalBytes != null) {
          setState(() {
            progress = event.cumulativeBytesLoaded / event.expectedTotalBytes!;
          });
        }
      },
    );
    ProgressiveImage(url)
        .resolve(ImageConfiguration.empty)
        .addListener(streamListener);
  }
}

说明

1. 初始化：在 initState 方法中调用 _startListenProgress 方法，开始监听图片加载进度。
2. 构建 UI：使用 Image 小部件加载渐进式图片，并通过 frameBuilder 和 errorBuilder 回调处理图片加载过程中的帧构建和错误处理。
3. 显示进度：在底部显示一个 CircularProgressIndicator 和加载进度文本。

通过以上步骤，你可以轻松地在 Flutter 应用中实现渐进式图片加载，并提升用户体验。