useState not working with ModalSheet

[anmol-me]

My hook under the build method of main page

final isLoading = useState(false);

Main Page shows a button to show modalsheet

Center(
        child: ElevatedButton(
          onPressed: showModalSheet,
          child: const Text('Show Sheet'),
        ),
      )

Method to show modal sheet
On pressing the Load button, the value of isLoading does get changed but it is not reflecting the change to change Close button to wait button.

    Future showModalSheet() {
      return showModalBottomSheet(
        context: context,
        builder: (context) {
          return Column(
            children: [
              ElevatedButton(
                onPressed: () async {
                  isLoading.value = true;
                  print('${isLoading.value}');

                  await Future.delayed(const Duration(seconds: 5)).then((_) {
                    isLoading.value = false;
                    print('${isLoading.value}');
                  });
                },
                child: const Text('Load'),
              ),
             // Not working here
              isLoading.value
                  ? const TextButton(onPressed: null, child: Text('Wait'))
                  : TextButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: const Text('Close'),
                    ),
            ],
          );
        },
      );
    }

[Lubette]

I also have similar problems and don't know how to solve them. I encountered similar issues when using GetX, and it's really frustrating.

[laeeqFaiz]

modals are asynchronous in nature. You need to handle the state within modal separately and then return a value using context.pop(returned_value).
You can then use this value to set the state where the modal was invoked.

make a HookWidget out of this for local state management within the modal:

Column(
            children: [
              ElevatedButton(
                onPressed: () async {
                  isLoading.value = true;
                  print('${isLoading.value}');

                  await Future.delayed(const Duration(seconds: 5)).then((_) {
                    isLoading.value = false;
                    print('${isLoading.value}');
                  });
                },
                child: const Text('Load'),
              ),
             // Not working here
              isLoading.value
                  ? const TextButton(onPressed: null, child: Text('Wait'))
                  : TextButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: const Text('Close'),
                    ),
            ],
          );
        },
      );

[Lubette]

Thank you. I've already solved this problem.