【问题标题】:Flutter: Firebase storage download urlFlutter:Firebase 存储下载地址
【发布时间】:2020-09-01 07:29:53
【问题描述】:

我是 Flutter 的新手,我正在尝试制作一个壁纸应用程序,在其中使用 Firebase 来存储我的图像。该应用程序从 Firebase 检索图像,用户可以共享图像并将其下载到设备。我正在使用 image_gallery_saver 包,但我无法获取图像的 url,因此我可以将其添加到 image_gallery_saver 函数中,有没有一种简单的方法可以在用户单击特定后从 firebase 获取图像的 url图片?

以下是首页:

import 'package:cardstest2/Screens/ImageScreen.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';




class FirestoreListViewPage extends StatefulWidget {
  @override
  _FirestoreListViewPageState createState() => _FirestoreListViewPageState();
}

class _FirestoreListViewPageState extends State<FirestoreListViewPage> {

  Future _data;

  Future getPosts() async {
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection("gallery").getDocuments();
    return qn.documents;
  }


  @override
  void initState() {
    super.initState();

    _data = getPosts();
  }


  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        title: Text('Subcategories'),
      ),
      body: Container(
        child: FutureBuilder(
            future: _data,
            builder: (_, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: Text('Waiting...'),
                );
              } else {

                return ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (_, index){

                      return Card(
                        child: ListTile(
                          title: Image.network(snapshot.data[index].data['GalleryUrl']),
                          onTap: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (context) => imageScreenPage(snapshot.data[index].data['GalleryUrl']),
                              ),
                            );
                          },
                        ),
                      );

                    });

              }
            }),
      ),
    );
  }
}

以下是imageScreen页面:

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:share/share.dart';
import 'package:dio/dio.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'dart:ui';



class imageScreenPage extends StatefulWidget {
  String cardPath;

  imageScreenPage(this.cardPath);

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

class _imageScreenPageState extends State<imageScreenPage> {

  final LinearGradient backgroundGradient = new LinearGradient(
      colors: [new Color(0x10000000), new Color(0x30000000)],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight);


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new SizedBox.expand(
        child: new Container(
          decoration: new BoxDecoration(gradient: backgroundGradient),
          child: new Stack(
            children: <Widget>[
              new Align(
                alignment: Alignment.center,
                child: new Hero(
                  tag: widget.cardPath,
                  child: new Image.network(widget.cardPath),

                ),

              ),
              new Align(
                alignment: Alignment.topCenter,
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    new AppBar(
                      elevation: 0.0,
                      backgroundColor: Colors.transparent,
                      leading: new IconButton(
                          icon: new Icon(
                            Icons.close,
                            color: Colors.black,
                          ),
                          onPressed: () => Navigator.of(context).pop()),
                    )
                  ],
                ),
              ),


            ],
          ),

        ),
      ),


      persistentFooterButtons: <Widget>[
        IconButton(
          icon: Icon(Icons.wallpaper), onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.file_download), onPressed: () {_save();},
        ),
        IconButton(
          icon: Icon(Icons.share), onPressed: () {Share.share(widget.cardPath);},
        ),
      ],

    );
  }

  _save() async {
    var response = await Dio().get("<insert url>", options: Options(responseType: ResponseType.bytes));
    final result = await ImageGallerySaver.saveImage(Uint8List.fromList(response.data));
    print(result);
  }



}

【问题讨论】:

    标签: firebase flutter dart firebase-storage


    【解决方案1】:

    要获取downloadUrl,请执行以下操作:

              StorageTaskSnapshot snapshot = await storage
                  .ref()
                  .child("images/$imageName")
                  .putFile(file)
                  .onComplete;
              if (snapshot.error == null) {
                final String downloadUrl =
                    await snapshot.ref.getDownloadURL();
                  }
    
    

    使用putFile将文件添加到Firebase Storage,然后您可以使用snapshot.ref.getDownloadURL()获取url。

    【讨论】:

    • 该应用不包括用户身份验证,并且用户不将图像上传到 Firebase。用户只需浏览图像集合,即可共享图像或将其下载到设备。图片是从 Firebase 中检索的。
    • 使用 firebase 的匿名登录允许用户通过创建帐户来访问存储。
    【解决方案2】:

    致 2021 年所有使用 Flutter 的人

    这对我有用

        import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;
    
        Future<String> uploadImage(imageFile) async {
        firebase_storage.Reference ref = storage.ref().child('post_$postId.jpg');
        firebase_storage.UploadTask uploadTask = ref.putFile(imageFile);
        print('File Uploaded');
        var imageUrl = await (await uploadTask).ref.getDownloadURL();
        String url = imageUrl.toString();
        return url;
      }
    

    uploadImage() 是一个接收图像文件的函数

    您必须在异步函数中使用 await uploadImage(imageFile) 调用它

    【讨论】:

    • 这项工作对我来说还不够......请在你的答案中添加一些解释
    猜你喜欢
    • 2021-08-09
    • 2023-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多