解决Flutter中Firebase Storage图片加载的Invalid URI参数错误

问题核心：getDownloadURL()是异步方法，返回Future<String>类型，你直接调用toString()会把Future对象本身转成字符串（也就是Instance of 'Future<String>'），而非实际的图片下载URL，这才导致了无效URI错误。

下面是两种可行的解决方式：

方式一：列表项内嵌套FutureBuilder处理单个URL #

在ListView的每个列表项里，用FutureBuilder单独处理当前文件的下载URL获取，等待异步完成后再渲染图片：

ListView.builder(
  itemCount: snapshot.data!.items.length,
  itemBuilder: (context, index) {
    final storageRef = snapshot.data!.items[index];
    return FutureBuilder<String>(
      future: storageRef.getDownloadURL(),
      builder: (context, urlSnapshot) {
        // 加载中状态
        if (urlSnapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }
        // 错误处理
        if (urlSnapshot.hasError) {
          return const Text('图片加载失败');
        }
        // 成功获取URL后渲染图片
        return Image.network(urlSnapshot.data!);
      },
    );
  },
)

方式二：提前批量获取所有图片URL #

修改你的数据获取逻辑，在拿到ListResult后，一次性批量获取所有文件的下载URL，外层FutureBuilder直接拿到URL列表再渲染：

// 修改getInstructorDocument方法，返回预加载好的URL列表
Future<List<String>> getInstructorDocument() async {
  final listResult = await FirebaseStorage.instance.ref('你的存储路径').listAll();
  // 批量异步获取每个文件的下载URL
  final downloadUrls = await Future.wait(
    listResult.items.map((ref) => ref.getDownloadURL()),
  );
  return downloadUrls;
}

// 外层FutureBuilder直接使用URL列表
FutureBuilder<List<String>>(
  future: _futureListResult,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    if (snapshot.hasError) {
      return const Text('数据加载失败');
    }
    return ListView.builder(
      itemCount: snapshot.data!.length,
      itemBuilder: (context, index) {
        return Image.network(snapshot.data![index]);
      },
    );
  },
)

两种方式的区别：

• 方式一适合列表项数量不多的场景，按需加载URL，避免一次性请求过多资源
• 方式二适合提前加载所有资源，减少单个列表项的异步请求开销，提升列表滚动流畅度

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