Flutter图片缓存构建插件 cached_network_image_builder 的使用

cached_network_image_builder 是一个用于在Flutter应用中缓存网络图片的插件。它通过基本的HTTP请求下载图片，并检查图片是否已经存储，从而避免重复下载。

重要提示

• 插件只会下载一次图片，这意味着一旦下载后，即使服务器上的图片发生变化，也不会重新下载。

如何使用

基本用法

CachedNetworkImageBuilder(
    url: "https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg",
    builder: (imageFile) {
        return Center(child: Image.file(imageFile));
    },
),

更多定制化的用法

CachedNetworkImageBuilder(
    url: "misformatted_url_or_url_that_doesn't_contain_image",
    builder: (image) {
        return Center(child: Image.file(image));
    },
    // 可选的占位符小部件，直到从URL加载图像
    placeHolder: LinearProgressIndicator(),
    // 可选的错误小部件
    errorWidget: Image.asset('assets/images/error_image.png'),
    // 可选描述你的图像扩展名，默认值为; jpg, jpeg, gif 和 png
    imageExtensions: ['jpg', 'png'],
),

完整示例Demo

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

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

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

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

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

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: <Widget>[
            CachedNetworkImageBuilder(
              url: "misformatted_url_or_url_that_doesn't_contain_image",
              builder: (image) {
                return Center(child: Image.file(image));
              },
              // 可选的占位符小部件，直到从URL加载图像
              placeHolder: const LinearProgressIndicator(),
              // 可选的错误小部件
              errorWidget: Image.asset('assets/images/error_image.png'),
              // 可选描述你的图像扩展名，默认值为; jpg, jpeg, gif 和 png
              imageExtensions: const ['jpg', 'png'],
            ),
            const SizedBox(height: 40),
            CachedNetworkImageBuilder(
              url: "https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg",
              builder: (image) {
                return Center(child: Image.file(image));
              },
            ),
            const SizedBox(height: 40),
            CachedNetworkImageBuilder(
              url: "https://cdn.pixabay.com/photo/2020/05/30/17/18/wind-power-plant-5239642_1280.jpg",
              builder: (image) {
                return Center(child: Image.file(image));
              },
            ),
          ],
        ),
      ),
    );
  }
}

说明

• url: 图片的网络地址。
• builder: 构建函数，接收下载后的图片文件并返回一个显示该图片的小部件。
• placeHolder: 可选参数，当图片正在加载时显示的占位符小部件。
• errorWidget: 可选参数，当图片加载失败时显示的错误小部件。
• imageExtensions: 可选参数，指定支持的图片扩展名，默认为 ['jpg', 'jpeg', 'gif', 'png']。

通过以上示例和说明，您可以轻松地在Flutter应用中集成并使用 cached_network_image_builder 插件来缓存和显示网络图片。