在Flutter中,当你尝试从Firestore获取数据并使用setState
更新UI时,可能会遇到一些问题
pubspec.yaml
文件中添加了cloud_firestore
依赖,并运行了flutter pub get
。dependencies:
flutter:
sdk: flutter
cloud_firestore: ^x.x.x
google-services.json
(Android)或GoogleService-Info.plist
(iOS)文件。import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
StreamBuilder
或FutureBuilder
从Firestore获取数据,并在数据到达时调用setState
。这是一个使用FutureBuilder
的示例:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<DocumentSnapshot> _dataFuture;
@override
void initState() {
super.initState();
_dataFuture = FirebaseFirestore.instance.collection('yourCollection').doc('yourDocId').get();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Firestore Example'),
),
body: Center(
child: FutureBuilder<DocumentSnapshot>(
future: _dataFuture,
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
Map<String, dynamic> data = snapshot.data?.data() as Map<String, dynamic>;
return Text('Data: ${data['yourFieldName']}');
}
} else {
return CircularProgressIndicator();
}
},
),
),
);
}
}
这是一个使用StreamBuilder
的示例:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Firestore Example'),
),
body: Center(
child: StreamBuilder<DocumentSnapshot>(
stream: FirebaseFirestore.instance.collection('yourCollection').doc('yourDocId').snapshots(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.active) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
Map<String, dynamic> data = snapshot.data?.data() as Map<String, dynamic>;
return Text('Data: ${data['yourFieldName']}');
}
} else {
return CircularProgressIndicator();
}
},
),
),
);
}
}
请注意,这些示例仅用于演示如何从Firestore获取数据并更新UI。根据你的需求,你可能需要对这些示例进行修改。
领取专属 10元无门槛券
手把手带您无忧上云