如何修复ListView Builder无法显示Pictures文件夹本地图片的问题

你的核心问题是错误使用了Image.network加载本地文件——这个组件仅用于加载网络URL资源，本地存储的图片需要用Image.file来加载。以下是具体修复步骤：

1. 依赖准备（获取本地目录路径） #

首先添加path_provider包到pubspec.yaml，用来获取设备的Pictures目录路径：

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.1.2

执行flutter pub get完成依赖安装。

2. 获取Pictures目录完整路径 #

在你的State类中添加方法获取系统Pictures目录：

import 'package:path_provider/path_provider.dart';
import 'dart:io';

Future<Directory> getPicturesDirectory() async {
  // Android 获取公共Pictures目录；iOS 获取应用关联的图片存储目录
  return await getExternalStoragePublicDirectory(DirectoryType.pictures);
}

3. 修改ListView中的图片加载逻辑 #

把原来的Image.network替换为Image.file，并拼接完整文件路径：

// 在ListView的itemBuilder中修改leading部分
leading: FutureBuilder<Directory>(
  future: getPicturesDirectory(),
  builder: (context, dirSnapshot) {
    if (dirSnapshot.hasData) {
      // 拼接数据库中图片名与Pictures目录的完整路径
      File imageFile = File('${dirSnapshot.data!.path}/${problem.image}');
      // 检查文件是否存在
      if (imageFile.existsSync()) {
        return Image.file(
          imageFile,
          height: 55,
          width: 55,
          fit: BoxFit.cover,
        );
      } else {
        // 文件不存在时显示占位图标
        return Icon(Icons.image_not_supported, size: 55);
      }
    } else {
      // 目录未加载完成时显示加载指示器
      return CircularProgressIndicator();
    }
  },
),

4. 配置系统权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加存储读取权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- Android 13+ 需添加媒体图片权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

• iOS：在ios/Runner/Info.plist中添加相册访问权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以展示图片</string>

额外注意事项 #

• 确保数据库中存储的图片名称包含完整文件后缀（如.jpg、.png），否则拼接路径后无法识别有效文件。
• 若为Android 10及以上版本，使用公共存储目录需注意Scoped Storage限制，也可考虑将图片存储到应用私有目录，避免复杂权限配置。

内容的提问来源于stack exchange，提问作者gamedev dover