我找不到关于这个主题的任何东西,所以我的问题是:
如何在Flutter中显示Firebase存储中的文件?
到目前为止,我的函数如下:
PlatformFile? pickedFile;
Future uploadDoc() async {
final result = await FilePicker.platform.pickFiles(
allowMultiple: false,
type: FileType.custom,
allowedExtensions: ['pdf', 'jpg', 'png', 'jpeg'],
);
if (result != null) {
setState(() {
pickedFile = result.files.first;
});
} else {
return null;
}
if (pickedFile != null) {
final destination = 'files/';
final file = File(pickedFile!.path!);
Reference ref =
FirebaseStorage.instance.ref(destination).child(pickedFile!.name);
await ref.putFile(file);
String url = await ref.getDownloadURL();
print('$url is UPLOADED');
}
}
此时,文件已上传到存储器中,我可以使用FutureBuilder获取其URL并显示其名称:
futureFiles = storage.ref('files/').listAll();
FutureBuilder<ListResult>(
future: futureFiles,
builder: (BuildContext context, snapshot) {
if (snapshot.hasError) {
return const Text('Something went wrong');
} else if (snapshot.connectionState == ConnectionState.waiting ||
!snapshot.hasData) {
return Center(
child: CircularProgressIndicator.adaptive(
backgroundColor: Colors.white,
),
);
} else {
final files = snapshot.data!.items;
return ListView.builder(
itemCount: files.length,
itemBuilder: ((context, index) {
final file = files[index];
return ListTile(
title: Text(file.name),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.launch),
color: Colors.blue,
onPressed: () {
// FUNCTION TO DISPLAY THE FILE
},
),
);
})),
],
);
}
},
),
上传文件的名称已列出,但如何显示文件本身?
我认为正确的方法应该是访问文件的URL,但是我不知道怎么做。有什么建议吗?
2条答案
按热度按时间z8dt9xmd1#
getDownloadURL()
将获取该图像的网络URL,在示例中,您已经将其保存为:您只需将该URL分配给
Image.network()
小部件即可显示它:njthzxwz2#
要在Flutter中显示Firebase存储中的文件,您可以使用FlutterWebviewPlugin包在web视图中加载文件URL。
首先,您需要将
FlutterWebviewPlugin
包添加到pubspec.yaml文件中:然后,您可以使用以下代码在Web视图中加载文件URL:
然后,您可以调用MyWebView小部件并将文件URL传递给它。