Display updated value everytime button is press firebase flutter - flutter

Question

i am trying to displaying the new value every time the user click the button but it keeps displaying the old data. I need to hot restart to see the new data after i update it. I do not know what i did wrong because i am still learning. This is my full code. I hope someone can help me because i am stuck here 3 hours +
TextEditingController _reloadEditingController = new TextEditingController();
int balance = 0;
late int s = int.parse(_reloadEditingController.text);
final _formKey = GlobalKey<FormState>();
String? name;
String email = '';
String phoneNumber = '';
String imageUrl = '';
String joinedAt = '';
String location = '';
void reload() async {
FirebaseFirestore.instance
.collection("users")
.doc(widget.userID)
.update({"balance": balance + s});
}
void getUserData() async {
try {
_isLoading = true;
final DocumentSnapshot userDoc = await FirebaseFirestore.instance
.collection('users')
.doc(widget.userID)
.get();
if (userDoc == null) {
return;
} else {
setState(() {
name = userDoc.get('name');
email = userDoc.get('email');
phoneNumber = userDoc.get('phoneNumber');
imageUrl = userDoc.get('userImage');
location = userDoc.get('location');
balance = userDoc.get('balance');
});
final FirebaseAuth _auth = FirebaseAuth.instance;
User? user = _auth.currentUser;
final _uid = user!.uid;
setState(() {
_isSameUser = _uid == widget.userID;
});
}
} catch (error) {
} finally {
_isLoading = false;
}
}
void initState() {
super.initState();
getUserData();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.teal[300],
appBar: AppBar(
title: const Text('Wallet'),
flexibleSpace: Container(
color: Colors.teal[300],
),
leading: IconButton(
onPressed: () {
final FirebaseAuth _auth = FirebaseAuth.instance;
final User? user = _auth.currentUser;
final String uid = user!.uid;
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => ProfileScreen(
userID: uid,
)));
},
icon: Icon(Icons.arrow_back, size: 40, color: Colors.white)),
),
body: ListView(
children: [
Column(
children: [
Container(
width: 300,
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Color(0xFF006e6e)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
name!,
style: TextStyle(color: Colors.white, fontSize: 18),
),
],
),
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Text(
"Balance",
),
],
),
Row(
children: [
Text(
'RM',
),
Container(
child: FutureBuilder<DocumentSnapshot>(
future: FirebaseFirestore.instance
.collection('users')
.doc(widget.userID)
.get(),
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
return Text(balance.toString());
},
),
),
],
),
Row(
children: [
Text("Reload your E-Wallet",
)
],
),
Row(
children: [
Form(
key: _formKey,
child: Expanded(
child: TextFormField(
controller: _reloadEditingController,
keyboardType: TextInputType.phone,
),
),
)
],
)
],
),
),
),
Container(
width: 320,
child: MaterialButton(
onPressed: () {
reload();
},
child: Padding(
padding: EdgeInsets.symmetric(vertical: 14),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Reload E-Wallet",
)
],
),
),
),
),
],
)
],
));

Answer 1

You need yo call getUserData when you update your data so change your reload to this:
void reload() async {
int s = int.parse(_reloadEditingController.text); // define this hear
await FirebaseFirestore.instance
.collection("users")
.doc(widget.userID)
.update({"balance": balance + s});
setState(() {});
}

Answer 2

Solution of this problem depends on Stream, because you want the live data.
You want to upload data and download it for show in the UI.
If you try to use StreamBuilder instead of FutureBuilder, I think it may be help..
For me I use GetX package, and since a while I faced the same problem, I will put the URL for my question and see if you can take an idea..
Flutter: live stream with getx has a problem, it shows data without updating