我認為這將比結果容易得多，但我有一個名為“USER_TABLE”的集合，其中包含用戶 ID、電子郵件、名字和姓氏。
我想從資料庫中檢索 firstName，然后在 Text 小部件中使用它
我正在列印 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 \n\n "
"Glad you're back, please enter a mood for today.\n\n "
"Be sure to check the insights page for the most up to date mood analysis\n\n"
"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'];
}
}
uj5u.com熱心網友回復：
從 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"]} \n\n "
"Glad you're back, please enter a mood for today.\n\n "
"Be sure to check the insights page for the most up to date mood analysis\n\n"
"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會出現，然后在回傳資料時它會處于完成狀態。也獲得future在initState
未來必須更早獲得，例如在 State.initState、State.didUpdateWidget 或 State.didChangeDependencies 期間。在構造 FutureBuilder 時，不能在 State.build 或 StatelessWidget.build 方法呼叫期間創建它。如果future與FutureBuilder同時創建，那么每次FutureBuilder的parent重建時，異步任務都會重新啟動。
查看：
https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
https://docs.flutter.dev/cookbook/networking/fetch-data
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420625.html
標籤：
上一篇：使用子變數而不重寫函式類