Flutter图片预加载与缓存插件precached_network_image的使用

Flutter图片预加载与缓存插件precached_network_image的使用

Precached network image 插件介绍

• 插件链接: pub.dartlang.org/packages/precached_network_image
• GitHub: github.com/janlionly/flutter_precached_network_image

简介: Flutter库，用于从网络加载和缓存图片到磁盘，并支持提前缓存图片到内存中，以避免由于延迟时间导致的闪屏问题。

使用说明

• 直接使用: 可以直接使用 PrecachedNetworkImage。

  PrecachedNetworkImage(
    url: 'https://picsum.photos/200',
    width: 200, 
    height: 200,
    precache: true, // 默认为false，true表示下次加载时从内存中提前缓存。
    fit: BoxFit.fill,
    placeholder: (context, url) => const Icon(Icons.person),
    errorWidget: (context, url, error) {
      log("get image failed code: $error");
      return const Icon(Icons.error);
    },
  ),
  

• 提前缓存到内存: 如果想要提前将图片缓存到内存中，可以调用 PrecachedNetworkImageManager.instance.precacheNetworkImages(isLog: true) 来在启动时读取磁盘文件到内存中。

  [@override](/user/override)
  void initState() {
    super.initState();
    PrecachedNetworkImageManager.instance.precacheNetworkImages(isLog: true);
  }
  

PrecachedNetworkImageManager 方法介绍

• precacheNetworkImages: 将所有URL（或目标参数URLs）缓存到内存中的文件中。
  • 用途: 在启动时调用此方法可以避免由于延迟时间导致的闪屏问题。
  • 示例: 设置 PrecachedNetworkImage(..., precache: true) 为 true 后，可以在启动时调用此方法。
• addPrecache: 添加需要提前缓存的URL。

  addPrecache({[@required](/user/required) String url});
  

• deletePrecache: 删除取消缓存的URL。

  deletePrecache({[@required](/user/required) String url});
  

• deleteImageCache: 删除给定URL缓存在内存和磁盘上的文件。

  deleteImageCache({[@required](/user/required) String url});
  

• cleanImageCache: 清除给定URL缓存在内存和磁盘上的文件。

  cleanImageCache();
  

• cleanPrecache: 清除所有URL的缓存。

  cleanPrecache();
  

• cleanCaches: 清除所有URL的缓存以及内存和磁盘上的文件缓存。

  cleanCaches();
  

示例代码

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

class NewPage extends StatelessWidget {
  const NewPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('New Page'),
      ),
      body: Center(
        child: PrecachedNetworkImage(
          url: 'https://picsum.photos/300',
          width: 300,
          height: 300,
          precache: false,
          placeholder: (context, url) => const Icon(Icons.person),
          errorWidget: (context, url, error) {
            log("get image failed code: $error");
            return const Icon(Icons.error);
          },
        ),
      ),
    );
  }
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // PrecachedNetworkImageManager.instance.cleanCaches();
    PrecachedNetworkImageManager.instance.precacheNetworkImages(isLog: true);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('PrecachedNetworkImage'),
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.cloud_outlined)),
              Tab(icon: Icon(Icons.beach_access_sharp)),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const NewPage()),
                  );
                },
                child: const Text('Go to New Page'),
              ),
            ),
            Center(
              child: PrecachedNetworkImage(
                url: 'https://picsum.photos/300',
                width: 300,
                height: 300,
                precache: true,
                placeholder: (context, url) => const Icon(Icons.person),
                errorWidget: (context, url, error) {
                  log("get image failed code: $error");
                  return const Icon(Icons.error);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

Future<void> main() async {
  runApp(MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}