Flutter中如何展示Firebase Storage内的已上传文件？

要解决这个问题，核心是先获取文件的下载URL，再根据文件类型选择对应的组件展示。以下是具体实现步骤：

1. 获取文件的下载URL #

你已经通过listAll()拿到了Storage中的文件引用（Reference对象），每个引用可以通过getDownloadURL()异步获取下载链接。因为这是异步操作，需要在列表的itemBuilder中嵌套FutureBuilder来处理：

ListView.builder( 
  itemCount: files.length,
  itemBuilder: ((context, index) {
    final Reference fileRef = files[index];
    // 嵌套FutureBuilder获取当前文件的下载URL
    return FutureBuilder<String>(
      future: fileRef.getDownloadURL(),
      builder: (context, urlSnapshot) {
        if (urlSnapshot.connectionState == ConnectionState.waiting) {
          return ListTile(
            title: Text(fileRef.name),
            trailing: CircularProgressIndicator(size: 20)
          );
        }
        if (urlSnapshot.hasError) {
          return ListTile(
            title: Text(fileRef.name),
            trailing: Icon(Icons.error, color: Colors.red)
          );
        }
        final String fileUrl = urlSnapshot.data!;
        return ListTile(
          title: Text(fileRef.name),
          trailing: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              IconButton(
                icon: Icon(Icons.launch),
                color: Colors.blue,
                onPressed: () => _openFilePreview(fileUrl, fileRef.name),
              ),
            ],
          ),
        );
      },
    );
  })
),

2. 根据文件类型展示内容 #

根据你支持的文件类型（图片、PDF），选择对应的组件来展示：

2.1 展示图片（jpg/png/jpeg） #

直接使用Flutter内置的Image.network()组件加载URL即可：

void _openFilePreview(String fileUrl, String fileName) {
  final fileExt = fileName.split('.').last.toLowerCase();
  Navigator.push(context, MaterialPageRoute(builder: (context) {
    if (['jpg', 'jpeg', 'png'].contains(fileExt)) {
      return Scaffold(
        appBar: AppBar(title: Text(fileName)),
        body: Center(
          child: Image.network(
            fileUrl,
            loadingBuilder: (context, child, loadingProgress) {
              if (loadingProgress == null) return child;
              return CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                    : null,
              );
            },
          ),
        ),
      );
    }
    // 后续处理PDF的代码
    // ...
  }));
}

2.2 展示PDF文件 #

需要依赖第三方包，比如flutter_pdfview，先在pubspec.yaml中添加依赖：

dependencies:
  flutter_pdfview: ^1.2.1

然后在预览函数中添加PDF的处理逻辑：

void _openFilePreview(String fileUrl, String fileName) {
  final fileExt = fileName.split('.').last.toLowerCase();
  Navigator.push(context, MaterialPageRoute(builder: (context) {
    if (['jpg', 'jpeg', 'png'].contains(fileExt)) {
      // 图片展示逻辑
      // ...
    } else if (fileExt == 'pdf') {
      return Scaffold(
        appBar: AppBar(title: Text(fileName)),
        body: PDFView(
          filePath: fileUrl,
          enableSwipe: true,
          swipeHorizontal: true,
          autoSpacing: false,
          pageFling: false,
          onError: (error) => Center(child: Text('加载PDF失败')),
          onPageError: (page, error) => Center(child: Text('第$page页加载失败')),
        ),
      );
    } else {
      // 其他文件类型可以用WebView打开
      return Scaffold(
        appBar: AppBar(title: Text(fileName)),
        body: WebView(
          initialUrl: fileUrl,
          javascriptMode: JavascriptMode.unrestricted,
        ),
      );
    }
  }));
}

注意事项 #

• 确保Firebase Storage的规则允许读取这些文件（测试阶段可临时设置为allow read, write: if true;，生产环境需配置权限）。
• 使用WebView时，需添加webview_flutter依赖，并配置对应平台的网络权限。

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