从firestore到sputter的流建设者

时间:2018-05-26 12:29:42

标签: firebase google-cloud-firestore flutter

我想知道如何使用streambuilder从firestore获取数据以振乱应用程序。我创建了必要的Boilerplate代码,我有构建和工作的小部件,并在下面的代码中 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="w_activity_licenses_inputs"> <input class="upload" type="file" name="activity_licenses" required /> <a class="add_more_file" style="display:block">Add more file</a> </div>只不过是存在于firestore中的URL字符串。

headimageassetpath

我的火店: enter image description here

完整代码:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
      new StreamBuilder(
        stream: Firestore.instance.collection('Items').snapshots(),
        builder: (_, AsyncSnapshot<QuerySnapshot> snapshot) {
          var items = snapshot.data?.documents ?? [];
          return new Lost_Card(
            headImageAssetPath : snapshot.data.documents.map()(['url'],)   

          );
        },
      )

实际应用 enter image description here 请详细说明一下。 TKS。

5 个答案:

答案 0 :(得分:5)

这适用于一个项目

  body: new StreamBuilder(
    stream: Firestore.instance.collection("collection").snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return Text(
          'No Data...',
        );
      } else { 
          <DocumentSnapshot> items = snapshot.data.documents;

          return new Lost_Card(
          headImageAssetPath : items[0]["url"]
          );
      }

如果要从许多文档创建列表生成器,请像这样使用它

        return new ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) {
              DocumentSnapshot ds = snapshot.data.documents[index];
              return new Lost_Card(
                headImageAssetPath : ds["url"];

);

答案 1 :(得分:0)

Card buildItem(DocumentSnapshot doc) {
return Card(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'name: ${doc.data['name']}',
          style: TextStyle(fontSize: 24),
        ),
        Text(
          'todo: ${doc.data['todo']}',
          style: TextStyle(fontSize: 20),
        ),
        Text(
          'Age: ${doc.data['age']}',
          style: TextStyle(fontSize: 10),
        ),
        SizedBox(
          height: 12,
        ),
          ],
        )
      ],
    ),
  ),
);  }

对于将面临相同问题的其他人,卡和流构建器将代表一种解决方案。窗口小部件在声明之前具有Card,并在体内具有下一部分:

 body: ListView(
        padding: EdgeInsets.all(8),
        children: <Widget>[
          Form(
            key: _formKey,
            child: buildTextFormField(),
          ),
          StreamBuilder<QuerySnapshot>(
            stream: db
                .collection('CRUD')
                .snapshots(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Column(
                    children: snapshot.data.documents
                        .map((doc) => buildItem(doc))
                        .toList());
              } else {
                return SizedBox();
              }
            },
          )
        ],
      ),

答案 2 :(得分:0)

StreamBuilder<List<UData>>(
              stream: AdminData().getDrivers,
              builder: (context, snapshot) {
                return ListView(
                  children: snapshot.data.map((document) {
                    return hadCard(
                      widget: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          hadText(title: document.name),
                          hadText(title: document.phone),
                          hadText(title: document.Driver),
                        ],
                      ),
                    );
                  }).toList(),
                );
              }),

答案 3 :(得分:0)

根据 Firebase FireStore 2021 年的新变化,您可以使用 StreamBuilder 从集合中检索数据,如下所示

final _mFirestore = FirebaseFirestore.instance;

return StreamBuilder<QuerySnapshot>(
  stream:
      _mFirestore.collection(kFirebaseCollectionName).snapshots(),
  builder: (context, snapshots) {
    if (!snapshots.hasData) {
      return Center(
        child: Text('Data not available',),
      );
    }
    final messages = snapshots.data.docs;
    List<Text> textWidgets = [];

    messages.forEach((element) {
      final messageText = element['text'];
      final messageSender = element['sender'];

      final textWidget = Text('$messageText, $messageSender');
      textWidgets.add(messageBubbleWidget);
    });
  },
);

答案 4 :(得分:0)

在 Flutter 2 中使用 StreamBuilder 访问文档

StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('products').snapshots(),
    builder: (context, snapshot) {
        if (snapshot.hasData) {
        return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
                DocumentSnapshot doc = snapshot.data!.docs[index];
                return Text(doc['name']);
            });
        } else {
        return Text("No data");
        }
    },
)