Why my page is reloading when my TextFormField is focused?

Question

When I touch the TextField, it automaticly reloads my page, I can't put a single letter

I tried many things like removing the setState and it works but I need it in order to save my values in data, I found that the method could be put my future in initstate but I don't know how do that and I'm not sure this is the solution. I'm in StateFulWidget I also use a globalKey but it's outside the build method.

This is my code:

class _UpdateProfileState extends State<UpdateProfile> {

 final GlobalKey<FormState> _formKey  = GlobalKey<FormState>();

...
//My future
 body: Form(
        key: _formKey,
       child: Column(
          children: <Widget>[
            FutureBuilder<DocumentSnapshot>(
              future: Users
                  .doc(uid)
                  .get(),
              builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
                if (snapshot.hasError) {
                  return Text("Something went wrong");
                }
                if (snapshot.hasData && !snapshot.data!.exists) {
                  return Text("Document does not exist");
                }
                if (snapshot.connectionState == ConnectionState.done) {
                  return displayUserInformation(context, snapshot);
                } else {
                  return SizedBox(height: 400,
                      child: Center(child: CircularProgressIndicator()));
                }
              },
            ),
          ],
        ),
     ),
    );
  }

...
 //And this is My textFormField
 Padding(
           padding: const EdgeInsets.all(16.0),
           child: TextFormField(
             onChanged: (value) =>
                 setState(() => _name = value.trim()),
             initialValue: "${data['displayName'].toString()}",
               cursorColor: DarkTurquoise,
             decoration: InputDecoration(
               labelText: 'Name',
               labelStyle: TextStyle(
                 color: SeaTurquoise
               ),
               focusedBorder: UnderlineInputBorder(
                 borderSide:  BorderSide(color: SeaTurquoise, width: 2.0),),
               enabledBorder: UnderlineInputBorder(
                 borderSide: BorderSide(color: DarkGrey),
               ),
             ),
           ),
         ),

Thank you for your answer

Solution

put the code below on the button you are using to submit the form, it will take focus from your textfield and will give it to the button you can use also you focus node go to this link to learn more about it

       FocusScope.of(context).unfocus();
       FocusScope.of(context).requestFocus(new FocusNode());

Comments

[Mohammad K. Albattikhi]

Try replacing "onChanged" with "onEditingComplete"

[Wali Khan]

if you are using textfield in a future builder, it will rebuilds and you will not be able to work with it

[flowey]

When I replace onChanged whith onEditing complete it's underlined in red and I can't find a method for onEditingComplete on Internet

[flowey]

Yess I forgot that I was in a future , but I have to find a solution to display my data and edit it

[Wali Khan]

can you show the complete class ?

[flowey]

I changed my setState for textEditingController and it works thank you

[flowey]

I put it in the onpressed () { FocusScope.of(context).unfocus(); FocusScope.of(context).requestFocus(new FocusNode());} but it still doesn't work and my page reload averytime I put a letter

[Wali Khan]

i need to see your full code i think you are returning the textfield with future builder

[Wali Khan]

Also use a textediting controller to get and set data

[flowey]

So do I have to remove my setState ?

[flowey]

I changed my setState for textEditingController and it works thank you