在Flutter中显示来自Firebase存储的文件

eivnm1vs  于 2022-12-30  发布在  Flutter
关注(0)|答案(2)|浏览(128)

我找不到关于这个主题的任何东西,所以我的问题是:
如何在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,但是我不知道怎么做。有什么建议吗?

z8dt9xmd

z8dt9xmd1#

getDownloadURL()将获取该图像的网络URL,在示例中,您已经将其保存为:

String url = await ref.getDownloadURL();

您只需将该URL分配给Image.network()小部件即可显示它:

Image.network(url), // will show the image
njthzxwz

njthzxwz2#

要在Flutter中显示Firebase存储中的文件,您可以使用FlutterWebviewPlugin包在web视图中加载文件URL。
首先,您需要将FlutterWebviewPlugin包添加到pubspec.yaml文件中:

dependencies: flutter_webview_plugin: ^0.3.11

然后,您可以使用以下代码在Web视图中加载文件URL:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class MyWebView extends StatefulWidget {
  final String fileUrl;

  MyWebView({Key key, this.fileUrl}) : super(key: key);

  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: widget.fileUrl,
      withZoom: true,
      withLocalStorage: true,
      hidden: true,
      initialChild: Container(
        color: Colors.white,
        child: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

然后,您可以调用MyWebView小部件并将文件URL传递给它。

MyWebView(fileUrl: url),

相关问题