<dynamic>返回 Firestore 值时 Flutter 中的"未来"实例

Question

我原以为这会比原来容易得多，但我有一个名为"USER_TABLE"的集合，包含userID、电子邮件、名字和姓氏。

我想从数据库中检索firstName，然后在文本小部件中使用它

我打印firstName是为了调试，我得到了正确的值，但它在我的应用程序中显示为"未来"的实例

关于我做错了什么有什么想法吗？当前没有错误

感谢

代码：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:moodful/components/authentication_service.dart';
import 'package:moodful/components/background.dart';
import 'package:moodful/Screens/Login/login_screen.dart';

class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
// This size provide us total height and width of our screen
var firstName = getData();
//return Scaffold(
return BackgroundLogoRight(
text: "Home",
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Spacer(),
Expanded(
flex: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 10,
child: Text(
"$firstName nn "
"Glad you're back, please enter a mood for today.nn "
"Be sure to check the insights page for the most up to date mood analysisnn"
"The more you know the more control you have",
style: TextStyle(color: Colors.black, fontSize: 15),
textAlign: TextAlign.center,
),
),
],
),
),
Expanded(
flex: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return LoginScreen(); // change to return something sensible
},
),
);
}, // handle your image tap here
child: Image.asset(
"assets/images/recordMoodLogo.jpg",
width: size.width * 0.5,
fit: BoxFit.cover, // this is the solution for border
height: 110.0,
),
),
],
),
),
],
),
);
}
getData() async {
var currentUser = FirebaseAuth.instance.currentUser;
DocumentSnapshot variable = await FirebaseFirestore.instance
.collection('USER_TABLE')
.doc(currentUser!.uid)
.get();
print(variable['firstName']);
return variable['firstName'];
}
}

Answer 1

从Firebase或任何其他源获取数据时，都将以异步方式完成，因此需要一些时间才能获取数据。在Flutter中，您可以使用一个名为FutureBuilder的小部件来进行这些异步调用。例如：

class _HomeScreenState extends State<HomeScreen> {
Future<DocumentSnapshot<Map<String, dynamic>>>? _fetchedData;
@override
void initState() {
super.initState();
_fetchedData = getData();
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
FutureBuilder(
future: _fetchedData,
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot<Map<String, dynamic>>> snapshot) {
if (snapshot.hasData) {
return BackgroundLogoRight(
text: "Home",
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Spacer(),
Expanded(
flex: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 10,
child: Text(
"${snapshot.data!.data()!["firstname"]} nn "
"Glad you're back, please enter a mood for today.nn "
"Be sure to check the insights page for the most up to date mood analysisnn"
"The more you know the more control you have",
style: TextStyle(color: Colors.black, fontSize: 15),
textAlign: TextAlign.center,
),
),
],
),
),
Expanded(
flex: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return LoginScreen(); // change to return something sensible
},
),
);
}, // handle your image tap here
child: Image.asset(
"assets/images/recordMoodLogo.jpg",
width: size.width * 0.5,
fit: BoxFit.cover, // this is the solution for border
height: 110.0,
),
),
],
),
),
],
),
);
}
else {return CircularProgressIndicator();}
},
);
}
Future<DocumentSnapshot<Map<String, dynamic>>> getData() async {
var currentUser = FirebaseAuth.instance.currentUser;
return await FirebaseFirestore.instance
.collection('USER_TABLE')
.doc(currentUser!.uid)
.get();
}

getData()方法将返回userid文档中的数据，然后使用FutureBuilder小部件可以显示用户的名称。由于这是异步的，它将处于等待状态，因此circularprogressindicator将出现，然后在返回数据时处于完成状态。还可以在initState中获得future

future必须提前获得，例如在State.initState、State.didUpdateWidget或State.didChangeDependencies期间。在构造FutureBuilder时，不能在State.build或StatelessWidget.build方法调用期间创建。如果future与FutureBuilder同时创建，那么每次重建FutureBuilders的父级时，异步任务都将重新启动。

检查：

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

https://docs.flutter.dev/cookbook/networking/fetch-data