Flutter高级网络图片加载插件flutter_advanced_networkimage_2的使用

Flutter 高级网络图片加载插件 flutter_advanced_networkimage_2 的使用

简介

flutter_advanced_networkimage_2 是一个高级的 Flutter 图片加载插件，它提供了缓存和重试功能。该项目是从 flutter_advanced_networkimage 迁移而来，并且已经迁移到了空安全。

开始使用

安装

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

dependencies:
  flutter_advanced_networkimage_2: any

然后运行以下命令来获取依赖：

flutter packages get

示例

以下是一些使用 flutter_advanced_networkimage_2 加载网络图片的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_advanced_networkimage_2/provider.dart';
import 'package:flutter_advanced_networkimage_2/transition.dart';
import 'package:flutter_advanced_networkimage_2/zoomable.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Example',
    theme: ThemeData(primaryColor: Colors.blue),
    home: const MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class Example extends State<MyApp> {
  final String url = 'https://openexpoeurope.com/wp-content/uploads/2019/12/flutter-logo-sharing.png';
  final String svgUrl = 'https://github.com/dart-lang/site-shared/raw/master/src/_assets/image/flutter/logo/default.svg';

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Advanced Network Image Example'),
          bottom: const TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: '加载图片'),
              Tab(text: '缩放小部件'),
              Tab(text: '缩放列表'),
            ],
          ),
        ),
        body: TabBarView(
          physics: const NeverScrollableScrollPhysics(),
          children: [
            LoadImage(url: url, svgUrl: svgUrl),
            ZoomableImage(url: url),
            ZoomableImages(url: url),
          ],
        ),
      ),
    );
  }
}

class LoadImage extends StatelessWidget {
  const LoadImage({required this.url, required this.svgUrl, Key? key}) : super(key: key);

  final String url;
  final String svgUrl;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TransitionToImage(
          image: AdvancedNetworkImage(
            url,
            loadedCallback: () => print('加载完成！'),
            loadFailedCallback: () => print('加载失败！'),
            timeoutDuration: const Duration(seconds: 30),
            retryLimit: 1,
          ),
          fit: BoxFit.contain,
          placeholder: Container(
            width: 300.0,
            height: 300.0,
            color: Colors.transparent,
            child: const Icon(Icons.refresh),
          ),
          imageFilter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          width: 300.0,
          height: 300.0,
          enableRefresh: true,
          loadingWidgetBuilder: (
            context,
            progress,
            imageData,
          ) {
            return Container(
              width: 300.0,
              height: 300.0,
              alignment: Alignment.center,
              child: CircularProgressIndicator(
                value: progress == 0.0 ? null : progress,
              ),
            );
          },
        ),
        Expanded(
          child: SvgPicture(
            AdvancedNetworkSvg(
              svgUrl,
              (theme) => (bytes, colorFilter, key) {
                return svg.svgPictureDecoder(
                  bytes ?? Uint8List.fromList(const []),
                  false,
                  colorFilter,
                  key,
                  theme: theme,
                );
              },
            ),
          ),
        ),
      ],
    );
  }
}

class ZoomableImage extends StatelessWidget {
  const ZoomableImage({required this.url, Key? key}) : super(key: key);

  final String url;

  @override
  Widget build(BuildContext context) {
    return ZoomableWidget(
      maxScale: 5.0,
      minScale: 0.5,
      multiFingersPan: false,
      autoCenter: true,
      child: Image(image: AdvancedNetworkImage(url)),
    );
  }
}

class ZoomableImages extends StatelessWidget {
  const ZoomableImages({required this.url, Key? key}) : super(key: key);

  final String url;

  @override
  Widget build(BuildContext context) {
    return ZoomableList(
      maxScale: 2.0,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image(image: AdvancedNetworkImage(url)),
          Image(image: AdvancedNetworkImage(url)),
          Image(image: AdvancedNetworkImage(url)),
          Image(image: AdvancedNetworkImage(url)),
          Image(image: AdvancedNetworkImage(url)),
        ],
      ),
    );
  }
}

获取磁盘缓存文件夹大小

你可以通过以下代码获取磁盘缓存文件夹的大小：

int cacheSize = await DiskCache().cacheSize();

清理磁盘缓存

你可以通过以下代码清理磁盘缓存：

bool isSucceed = await DiskCache().clear();

使用缩放小部件和过渡到图像小部件

ZoomableWidget(
  minScale: 0.3,
  maxScale: 2.0,
  panLimit: 0.8,
  child: Container(
    child: TransitionToImage(
      image: AdvancedNetworkImage(url, timeoutDuration: Duration(minutes: 1)),
      placeholder: CircularProgressIndicator(),
      duration: Duration(milliseconds: 300),
    ),
  ),
)

包含重新加载功能

TransitionToImage(
  image: AdvancedNetworkImage(url,
    loadedCallback: () {
      print('It works!');
    },
    loadFailedCallback: () {
      print('Oh, no!');
    },
    loadingProgress: (double progress) {
      print('Now Loading: $progress');
    },
  ),
  loadingWidgetBuilder: (_, double progress, __) => Text(progress.toString()),
  fit: BoxFit.contain,
  placeholder: const Icon(Icons.refresh),
  width: 400.0,
  height: 300.0,
  enableRefresh: true,
);

缩放小部件大小

ZoomableWidget(
  panLimit: 1.0,
  maxScale: 2.0,
  minScale: 0.5,
  singleFingerPan: true,
  multiFingersPan: false,
  enableRotate: true,
  child: Image(
    image: AssetImage('graphics/background.png'),
  ),
  zoomSteps: 3,
),