如何停止 SetState flutter

Question

I work on flutter project. when i click to modify icon to edit name for example ==> the screen is roaleded automatically. How i can stop refresh screen after click on edit button?

this piece of my Form code:

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
        Text('Adresse email :',
            style: TextStyle(
                color: Color(0xFF4053FCF),
                fontSize: 16,
                fontWeight: FontWeight.w600
            ),
        ),
        IconButton(
            icon: Icon(CommunityMaterialIcons.pencil,
            color: Colors.grey,
            ),
            onPressed: () {
                emailNode.requestFocus();
                setState(() {
                    enableemail = true;
                });
            })
    ],
),

  void editUserProfile() async {
    setState(() {});

    // if (_formKey.currentState.validate()) {
    String name = _nameController.text;
    String email = _emailController.text;
    String adress = _adressController.text;

    userApi.editUserProfile(name, email, adress).then((data) {
      print(data);
      if (data != null) {
        //   Navigator.pop(context);

        /*  Navigator.push(
            context, MaterialPageRoute(builder: (context) => Profile()));*/
      }
      //  setState(() {});

      /* Navigator.push(
            context, MaterialPageRoute(builder: (context) => BoxSettings()));*/

      setState(() {
        enableup = false;
        enableadress = false;
        enableemail = false;
      });

      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(data)));

      // ScaffoldMessenger.of(context).showSnackBar(snackBar3);
    }).catchError((error) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(error.toString())));
    });
    setState(() {});
  }

and this my screen for more information:

How i can press on edit button without reload screen?

Answer 1

There some workarounds to achieve this (ie update the state of one widget after tapping a completely different widget) like passing the callback function as a parameter etc.

But The best and neat solution here which will solve the above problem and keep your code neat is using Provider pattern.

If you are not aware of how a Provider pattern works, you can easily google search for articles regarding it. Here is one of them:

https://www.raywenderlich.com/6373413-state-management-with-provider

Read the above article before moving below.

Basically what we do is:

Create a ChangeNotifier class.

Wrap the parent of both widgets by a ChangeNotifierProvider widget.

Wrap the widget you want to update with Consumer widget.

Then in your onTap/onPressed function of Edit button you can call a function which will call the notifyListener() function. What this will do is it will notify the above ChangeNotifierProvider widget that some change has neen occured in it's widget tree. Then it will traverse the child whole widget tree below and will update the widget wrapped with Consumer widget.

So this way, you wont need to refresh your whole screen and you can easily update one widget by doing some action on a competely different widget.

Answer 2

Wrap the widgets you want to refresh inside stateful builder and make the whole screen a stateless widget and then call stateful builder