如何在 flutter web 上使用 StreamBuilder 和 Firestore?
How to use StreamBuilder with Firestore at flutter web?
我正在使用 flutter web 构建一个站点,但我无法将数据从 firestore 获取到 StreamBuilder,因为 onSnapshot 无法正常工作...
我正在使用这个包https://pub.dev/packages/firebase
我的代码:
import 'package:flutter/material.dart';
import 'package:firebase/firebase.dart';
import 'package:firebase/firestore.dart' as fs;
class Playground extends StatefulWidget {
@override
_PlaygroundState createState() => _PlaygroundState();
}
class _PlaygroundState extends State<Playground> {
@override
Widget build(BuildContext context) {
fs.Firestore dataBase = firestore();
fs.CollectionReference teachersRef = dataBase.collection('teachers');
return Center(
child: Container(
width: 700,
height: 400,
color: Colors.cyanAccent,
child: StreamBuilder(
stream: teste.collection('teachers').onSnapshot,
builder: (context, snapshot) {
if (!snapshot.hasData) return Text('Loading...');
return ListView.builder(
//itemExtent: 30,
itemCount: 4,
itemBuilder: (context, index) {
return Container(
width: 10,
color: Colors.amber,
child: Text(snapshot.data[index]['name']),
);
},
);
},
),
),
);
}
}
但我得到了这个答案:
'[]'
动态调用 null。
接收者:'QuerySnapshot' 的实例
参数:[0]
有谁知道如何在 Flutter web 上正确使用 Firestore 吗?
我认为你的问题出在这里:
fs.CollectionReference teachersRef = dataBase.collection('teachers');
试试这个:
final teachersRef = Firestore.instance.collection('teachers');
现在您可以使用 teachersRef 获取快照并在您的 StreamBuilder
中使用它
您好,您应该使用 firestore()
初始化函数。你的代码中应该有 <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-storage.js"></script>
行,并在你的 main 中初始化它。
示例代码如下:
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Your web app title</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
// your main function
void main(){
initializeApp(
apiKey: "{YOUR API KEY}",
authDomain: "{YOUR AUTH DOMAIN}",
databaseURL: "{YOUR DATABASE URL}",
projectId: "{YOUR PROJECT ID}",
storageBucket: "{YOUR STORAGE BUCKET}",
messagingSenderId: "{YOUR MESSAGING SENDER ID}",
);
runApp(MyApp());
}
您实际 class 使用库
import 'package:firebase/firestore.dart';
class FirebaseHandler {
FirebaseHandler({Firestore firestoreInstance,})
: _firestore = firestoreInstance ?? firestore(); // firestore() is the default initializer for your firebase APP firestore.
final Firestore _firestore;
Stream getCollection(String collection){
try {
return _firestore.collection(collection + "/").onSnapshot;
} catch (e) {
print('Error retrieving snapshot: $e');
throw '$e';
}
}
}
我认为这个问题与最终构建线有关
child: Text(snapshot.data[index]['name']),
快照数据是来自 JScript
导入的 QuerySnapshot
,而不是您正在执行的 AsyncQuerySnapshot
。
我修改为调用成功
child: Text(snapshot.data.docs[index].get('name')),
我正在使用 flutter web 构建一个站点,但我无法将数据从 firestore 获取到 StreamBuilder,因为 onSnapshot 无法正常工作...
我正在使用这个包https://pub.dev/packages/firebase
我的代码:
import 'package:flutter/material.dart';
import 'package:firebase/firebase.dart';
import 'package:firebase/firestore.dart' as fs;
class Playground extends StatefulWidget {
@override
_PlaygroundState createState() => _PlaygroundState();
}
class _PlaygroundState extends State<Playground> {
@override
Widget build(BuildContext context) {
fs.Firestore dataBase = firestore();
fs.CollectionReference teachersRef = dataBase.collection('teachers');
return Center(
child: Container(
width: 700,
height: 400,
color: Colors.cyanAccent,
child: StreamBuilder(
stream: teste.collection('teachers').onSnapshot,
builder: (context, snapshot) {
if (!snapshot.hasData) return Text('Loading...');
return ListView.builder(
//itemExtent: 30,
itemCount: 4,
itemBuilder: (context, index) {
return Container(
width: 10,
color: Colors.amber,
child: Text(snapshot.data[index]['name']),
);
},
);
},
),
),
);
} }
但我得到了这个答案:
'[]' 动态调用 null。 接收者:'QuerySnapshot' 的实例 参数:[0]
有谁知道如何在 Flutter web 上正确使用 Firestore 吗?
我认为你的问题出在这里:
fs.CollectionReference teachersRef = dataBase.collection('teachers');
试试这个:
final teachersRef = Firestore.instance.collection('teachers');
现在您可以使用 teachersRef 获取快照并在您的 StreamBuilder
中使用它您好,您应该使用 firestore()
初始化函数。你的代码中应该有 <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-storage.js"></script>
行,并在你的 main 中初始化它。
示例代码如下:
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Your web app title</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
// your main function
void main(){
initializeApp(
apiKey: "{YOUR API KEY}",
authDomain: "{YOUR AUTH DOMAIN}",
databaseURL: "{YOUR DATABASE URL}",
projectId: "{YOUR PROJECT ID}",
storageBucket: "{YOUR STORAGE BUCKET}",
messagingSenderId: "{YOUR MESSAGING SENDER ID}",
);
runApp(MyApp());
}
您实际 class 使用库
import 'package:firebase/firestore.dart';
class FirebaseHandler {
FirebaseHandler({Firestore firestoreInstance,})
: _firestore = firestoreInstance ?? firestore(); // firestore() is the default initializer for your firebase APP firestore.
final Firestore _firestore;
Stream getCollection(String collection){
try {
return _firestore.collection(collection + "/").onSnapshot;
} catch (e) {
print('Error retrieving snapshot: $e');
throw '$e';
}
}
}
我认为这个问题与最终构建线有关
child: Text(snapshot.data[index]['name']),
快照数据是来自 JScript
导入的 QuerySnapshot
,而不是您正在执行的 AsyncQuerySnapshot
。
我修改为调用成功
child: Text(snapshot.data.docs[index].get('name')),