Page refreshes when textformfield is focused on - flutter

Question

In a 'Edit Profile' page, when a Textformfield is focused on to edit the text, the entire page reloads and doesn't allow me to change or input anything. The code is like this :
body: Form(
key: _formKey,
child: FutureBuilder<DocumentSnapshot<Map<String, dynamic>>>(
future: FirebaseFirestore.instance
.collection('appusers')
.doc(widget.id)
.get(),
builder: (_, snapshot) {
if (snapshot.hasError) {
print('Something went wrong');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
var data = snapshot.data!.data();
var name = data!['name'];
return Padding(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 30),
child: Column(
children: [
Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: TextFormField(
initialValue: name,
autofocus: false,
onChanged: (value) => name = value,
decoration: InputDecoration(
labelText: 'Name: ',
border: OutlineInputBorder(),
errorStyle:
TextStyle(color: Colors.redAccent, fontSize: 12),
),
validator: (value) {
RegExp regex = new RegExp(r'^.{3,}$');
if (value == null || value.isEmpty) {
return 'Please enter full name.';
}
if (!regex.hasMatch(value)) {
return ("Please enter a name.");
}
return null;
},
),
),
SizedBox(height: 40),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
updateUser(widget.id, name);
}
Navigator.of(context).pop();
},
child: Text(
'Update',
style: TextStyle(fontSize: 15),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
'Cancel',
style: TextStyle(fontSize: 15),
),
),
],
),
)
],
),
);
},
)),
Is there a reason why the page keeps being refreshed? There are other textfields similar to 'name' and clicking on any of those causes this page to reload. The formkey has been declared before Widget build as final _formKey = GlobalKey<FormState>();.

Answer 1

To give you an understanding of how flutter handles the app when the keyboard is opened.
When the keyboard is opened, flutter actually changes the screen size (i.e the bottom padding changes) because of this when you access the MediaQuery.of(context) in this widget it will cause the widget to rebuild so that MediaQuery.of(context) will return the updated MediaQueryData. This rebuilding is fine.
The problem is in the way you are using the FutureBuilder s future parameter. The FirebaseFirestore.instance.collection('appusers').doc(widget.id).get() will get executed everytime there is a rebuild of this EditProfile widget , but you probably want this to be called only once when the widget is loaded first time. So you need to initialize the future in the StatefulWidget initState like:
Future future;
#override
void initState() {
super.initState();
future = FirebaseFirestore.instance.collection('appusers').doc(widget.id).get();
}
Now this will not call the FirebaseFirestore call whenever the widget rebuilds. But there is another issue with your TextFormFields initialValue parameter. It uses the name variable which is declared and being initialized within the build method which does not seem right. You could do something like:
var name:
Future future;
#override
void initState() {
super.initState();
future = FirebaseFirestore.instance.collection('appusers').doc(widget.id).get();
future.then((value) {
if(value != null) {
var name = value.data!['name'];
}
});
}