Flutter图片加载原理与缓存，kotlin开发文档

在Flutter中，图片的加载和缓存通常是通过Image小部件和CachedNetworkImage包来实现的。

使用Image小部件

Image.network(
  'https://example.com/image.png',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child; // 图片未开始加载时，显示child
    return Center(child: CircularProgressIndicator()); // 图片加载中显示进度指示器
  },
  errorBuilder: (context, error, stackTrace) {
    return Center(child: Icon(Icons.error)); // 图片加载失败时显示错误图标
  },
)

使用CachedNetworkImage

首先，您需要添加cached_network_image包到您的pubspec.yaml文件：

dependencies:
  cached_network_image: ^3.2.0

然后，在您的代码中使用CachedNetworkImage：

import 'package:cached_network_image/cached_network_image.dart';
 
CachedNetworkImage(
  imageUrl: 'https://example.com/image.png',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

CachedNetworkImage会自动缓存从网络加载的图片，以便后续使用相同URL时可以更快地加载。

注意：CachedNetworkImage需要网络权限来读取并缓存图片。确保您的AndroidManifest.xml和Info.plist文件已正确配置网络权限。