Home > other >  Why my page is reloading when my TextFormField is focused?
Why my page is reloading when my TextFormField is focused?

Time:09-25

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

CodePudding user response:

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

CodePudding user response:

it's kinda hard to answer because I can't see the whole code and the connection between the text field and the widget class. but I think that if you would declare the _formKey as static outside of the build method, it would solve your issue

  • Related