firebase - 如何在Flutter中检索Firebase Storage图像流？

Question

我已经将几张照片上传到了Firebase存储中，文件名为“照片”，我希望能够通过流将其检索到我的应用程序中。我之前在Firebase云数据库中通过点击StreamBuilder中的Firestore.instance.collection('messages')。snapshots()属性来完成此操作，但是我不知道如何访问Firebase存储快照并将其作为流到我的应用中。

这是我用于消息快照的代码，希望对您有所帮助:

final _firestore = Firestore.instance;

  void messagesStream() async {
    await for (var message in _firestore.collection('messages').snapshots()){
      for (var snapshot in message.documents){
        print(snapshot.data);
      }
    }
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(

body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[

            StreamBuilder<QuerySnapshot>(
                stream: Firestore.instance.collection('messages').snapshots(),
                builder: (context, snapshot){

                  if (!snapshot.hasData){
                    return Center(
                      child: CircularProgressIndicator(backgroundColor: Colors.lightBlueAccent,),
                    );
                  } else {
                final messages = snapshot.data.documents;
                List<Text> messageWidgets = [];
                for (var message in messages){
                  final messageText = message.data['text'];
                  final messageSender = message.data['sender'];

                  final messageWidget = Text('$messageText from $messageSender');
                  messageWidgets.add(messageWidget);
                }
                return Column(children: messageWidgets,);
              }

            }
            ),
),
},

Answer 1

因此我发现您无法从Firebase存储创建流，但是我能做的是，在Firebase云数据库中，启动一个名为“my_collection”的新集合，并在一个新文档中创建一个自动ID，一个名为“image”的字段，它是一个字符串，带有指向Internet上图像的http引用，或者您可以将其上传到Internet(这是我在imgur.com上所做的，都归功于它们)!这是下面的代码，希望对其他人有所帮助!如果没有，请看看iampawan编写的这段代码，他帮了我一吨!

https://github.com/iampawan/FlutterWithFirebase

class MyList extends StatefulWidget {

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



class _MyListState extends State<MyList> {

  StreamSubscription<QuerySnapshot> subscription;
  List <DocumentSnapshot> myList;

  final CollectionReference collectionReference = Firestore.instance.collection('my_collection');
  final DocumentReference documentReference = Firestore.instance.collection('my_collection').document('GFWRerw45DW5GB54p');

  @override
  void initState() {
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        myList = datasnapshot.documents;
      });
    });
  }

@override
void dispose() {
  subscription?.cancel();
  super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return myList != null ?
        ListView.builder(
            itemCount: myList.length,
            itemBuilder: (context, index){
          String imgPath = myList[index].data['image'];
          return MyCard(assetImage: Image.network(imgPath), function:
              (){
            if (imgPath == myList[0].data['image']){
              Navigator.pushNamed(context, MyMenu.id);
            } else if (imgPath == myList[1].data['image']){
              Navigator.pushNamed(context, YourMenu.id);
            } else if (imgPath == myList[2].data['image']){
              Navigator.pushNamed(context, HisMenu.id);
            } else if (imgPath == myList[3].data['image']){
              Navigator.pushNamed(context, HerMenu.id);
            }
            },);
        })
        : Center(child: CircularProgressIndicator(),
    );

  }
}

请注意，MyCard是它自己的页面，带有自己的构造函数，该构造函数需要assetImage和将用户推送到新屏幕的功能:

MyCard({@required this.assetImage, @required this.function});
final Image assetImage;
final Function function;