Loading progress indicator is not displaing while making async call

Question

I try to use https://pub.dev/packages/loading_overlay to display a simple loading overlay while making an async call in form.

class AccountFormState extends State<AccountForm> {
  bool _loading = false;

  override
  Widget build(BuildContext context) {
    return LoadingOverlay(
      child: Form(
        ...
      ), 
      isLoading: _loading,
    );

where in the form there is a

ElevatedButton(
  onPressed: () async {
    if (_formKey.currentState.validate()) {
      bool loginResult = await webService.testLoginSite(); // an async call
      print('loginResult = $loginResult');

      if (loginResult == true) {
        Scaffold.of(context)
            .showSnackBar(SnackBar(content: Text('successfull')));
      }
    }
  },
  child: Text('Check login'),
),

The problem is that the LoadingOverlay does not show overlay loading indicatow while making an async call in the ElevatedButton.

Why does it not work?

I can't see you changing the state of isLoading – meditat Nov 06 '20 at 08:04 — meditat, Nov 06 '20 at 08:04

score 1 · Answer 1 · answered Nov 06 '20 at 08:04

You need to setState _isLoading before and after webService.testLoginSite()

ElevatedButton(
  onPressed: () async {
    if (_formKey.currentState.validate()) {
      setState(() {
        _isLoading = true;
      });
      bool loginResult = await webService.testLoginSite(); // an async call
      print('loginResult = $loginResult');

      setState(() {
        _isLoading = false;
      });
      if (loginResult == true) {
        Scaffold.of(context)
            .showSnackBar(SnackBar(content: Text('successfull')));
      }
    }
  },
  child: Text('Check login'),
),

Loading progress indicator is not displaing while making async call

1 Answers1