Как получить поток изображений Firebase Storage во флаттере? - PullRequest
Новая
       3

Как получить поток изображений Firebase Storage во флаттере?

0 голосов
/ 12 марта 2020

У меня есть несколько фотографий, которые я загрузил в свое хранилище Firebase в файле с именем 'photos', и я хочу иметь возможность загружать их в мое приложение через поток. Я делал это раньше через облачную базу данных Firebase, нажав на свойство Firestore.instance.collection ('messages'). Snapshots () в моем StreamBuilder, но я не знаю, как получить доступ к снимкам хранилища 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,);
              }

            }
            ),
),
},

1 Ответ

0 голосов
/ 13 марта 2020

Итак, я понял, что вы не можете создать поток из хранилища Firebase, но я мог в своей облачной базе данных Firebase запустить новую коллекцию с именем «my_collection» и в новом документе создать автозапуск. ID, с полем с именем 'image', которое является строкой, со ссылкой http на изображение, которое находится в inte rnet, или поле, которое вы можете загрузить в inte rnet (это то, что я сделал на imgur. ком, кредит им)! Вот мой код ниже, я надеюсь, что это поможет другим! Если это не так, взгляните на этот код, написанный 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;
...