如何在抖动中检索Firebase Storage图像流？

Question

我已经将一些照片上传到了Firebase存储中，文件名为'photos'，我希望能够通过流将其检索到我的应用程序中。我之前在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;