如何将Firestore中的数据设置为Flutter中TextField的初始值

Question

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
class ProfileSettings extends StatefulWidget {
@override
_ProfileSettingsState createState() => _ProfileSettingsState();

}
class _ProfileSettingsState extends State<ProfileSettings> {

final firestoreInstance = Firestore.instance;
void _setData() async{
var firebaseUser = await FirebaseAuth.instance.currentUser();
firestoreInstance.collection("tryingdata").document(firebaseUser.uid).setData(
{
"name" : "john",
"age" : 20,
"email" : "[e-mail]",
"address" : {
"street" : "street 24",
"city" : "new york"
}
}).then((_){
print("success!");
});
}

void _updateData()async{
var firebaseUser = await FirebaseAuth.instance.currentUser();
firestoreInstance
.collection("tryingdata")
.document(firebaseUser.uid)
.updateData({"age": _age.text}).then((_) {
print("success!");
print(_age);
});
}
final _auth = FirebaseAuth.instance;
String userAge;
TextEditingController _age = TextEditingController();
void _retrieveData() async{
var firebaseUser = await FirebaseAuth.instance.currentUser();
firestoreInstance.collection("tryingdata").document(firebaseUser.uid).get().then((value)
=> userAge = value.data["age"]);
print(userAge);
}
@override
Widget build(BuildContext context) {
_retrieveData();
return Scaffold(
appBar: AppBar(
title: Text(
"Profilepage",
style: TextStyle(
fontFamily: "tepeno",
fontWeight: FontWeight.w600,
),
),
actions: <Widget>[
],
),
body: Column(
children: <Widget>[
TextField(
controller: _age,
initialvalue: //here I need help,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR AGE',
hintStyle: TextStyle(color: Colors.grey),
),
),
RaisedButton(
onPressed: () {
_setData();
},
child: const Text('SetData', style: TextStyle(fontSize: 12)),
),
RaisedButton(
onPressed: () {
_updateData();
},
child: const Text('UpdateData', style: TextStyle(fontSize: 12)),
),
RaisedButton(
onPressed: () {
_retrieveData();
},
child: const Text('RetrieveData', style: TextStyle(fontSize: 12)),
),
]
),
);
}
}

_setData((和_updateData((函数运行良好。我想在TextField中显示初始值。当我点击_RetrieveData((按钮时，它会打印出值，例如：20，然后我将数据更新为21，当我再次打印时，它仍然是20。有时也会打印出null。我也在Widget构建中运行_RetrieveData((。所以我需要从firestore中获取数据，并在TextField中将其设置为初始值，然后我才能更新它。我该如何解决这个问题？我是Flutter的新手。非常感谢。

我得到了一些帮助，这就是解决方案：

Future<dynamic>_retrieveData() async{
var firebaseUser = await FirebaseAuth.instance.currentUser();
await Firestore.instance.collection("tryingdata").document(firebaseUser.uid).snapshots().listen((DocumentSnapshot doc) async{
Map<String, dynamic> document =doc.data;
setState((){
userAge=document['age'];
});
});
}

@override
void initState() {
// TODO: implement initState
super.initState();
_retrieveData();
}

Answer 1

您可以在以下窗口小部件中使用条件：

Container(child: value==null?Text('20'):Text(value))

将此代码添加到initState方法

@override
void initState() {
// TODO: implement initState
super.initState();
_retrieveData();
}

完整代码为：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
class ProfileSettings extends StatefulWidget {
@override
_ProfileSettingsState createState() => _ProfileSettingsState();

}
class _ProfileSettingsState extends State<ProfileSettings> {

final firestoreInstance = Firestore.instance;
void _setData() async{
var firebaseUser = await FirebaseAuth.instance.currentUser();
firestoreInstance.collection("tryingdata").document(firebaseUser.uid).setData(
{
"name" : "john",
"age" : 20,
"email" : "[e-mail]",
"address" : {
"street" : "street 24",
"city" : "new york"
}
}).then((_){
print("success!");
});
}

void _updateData()async{
var firebaseUser = await FirebaseAuth.instance.currentUser();
firestoreInstance
.collection("tryingdata")
.document(firebaseUser.uid)
.updateData({"age": _age.text}).then((_) {
print("success!");
print(_age);
});
}
final _auth = FirebaseAuth.instance;
String userAge;
TextEditingController _age = TextEditingController();
void _retrieveData() async{
var firebaseUser = await FirebaseAuth.instance.currentUser();
firestoreInstance.collection("tryingdata").document(firebaseUser.uid).get().then((value)
=> userAge = value.data["age"]);
print(userAge);
}
@override
void initState() {
// TODO: implement initState
super.initState();
_retrieveData();
}
@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: Text(
"Profilepage",
style: TextStyle(
fontFamily: "tepeno",
fontWeight: FontWeight.w600,
),
),
actions: <Widget>[
],
),
body: Column(
children: <Widget>[
TextField(
controller: _age,
initialvalue: //here I need help,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR AGE',
hintStyle: TextStyle(color: Colors.grey),
),
),
RaisedButton(
onPressed: () {
_setData();
},
child: const Text('SetData', style: TextStyle(fontSize: 12)),
),
RaisedButton(
onPressed: () {
_updateData();
},
child: const Text('UpdateData', style: TextStyle(fontSize: 12)),
),
RaisedButton(
onPressed: () {
_retrieveData();
},
child: const Text('RetrieveData', style: TextStyle(fontSize: 12)),
),
]
),