我有一个Flutter移动应用程序,该应用程序的运行效果非常好,但是当尝试将相同的代码迁移到Flutter Web时,我无法使用从FireStore中获取数据。就像StreamBuilder不想在Web模式下工作,而是仅在移动应用程序模式下工作一样。
在dart文件的顶部,我已导入:
'package:cloud_firestore/cloud_firestore.dart'
'package:firebase_auth/firebase_auth.dart'
下面的代码是显示streambuilder和listview的代码段。在网络模式下,代码处于固定if (!snapshot.hasData)
状态,并且仅向我的Chrome浏览器返回文本“正在加载...”。在移动应用程序中时,它会按预期工作,并返回包含Firestore中所有数据的列表视图。
Container(
height: safeBlockVertical * 0.9,
child: StreamBuilder(
stream: FirebaseFirestore.instance.collection(orgName).snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {return new Text('Loading...');} else {
return ListView(
children: snapshot.data.docs.map(
(DocumentSnapshot document) {
.
.
.
child: ListTile(
title: ....
trailing: ....
onTap: () {}
最初,我认为index.html中的firebase配置可能是错误的,并且经常摆弄它。但后来意识到情况并非如此,因为我能够从Firestore成功登录并获取用户信息而没有任何错误。所以firebase的配置很好,现在我想知道上面的StreamBuilder可能在Flutter Web上不起作用。是这样吗 有什么帮助吗?
在flutter的移动版和Web版Firebase的使用之间存在一些差异,但是对此没有明确的文档。
第一个问题是在创建Web应用程序似乎不起作用时,将firefire脚本导入html中作为firebase建议的默认版本。这是我使用过的版本,确实可以使用。
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js</script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-storage.js"></script>
其次,您可以在pubspec.yaml文件中使用的软件包有所不同。这是我使用并有效的方法:
firebase_web: ^5.0.9
它包括存储和Firestore功能。语法可能会有一些差异,但是您可以通过一些搜索来找到它们。
祝您编码好!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句