Why my page is reloading when my TextFormField is focused?

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

Upvotes: 1

Views: 2440

Answers (1)

Wali Khan
Wali Khan

Reputation: 652

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());

Upvotes: 1

Related Questions