Ad

How To Show And Hide Dialog In Flutter While Fetching Firebase Data

- 1 answer

I have modal with and CircularProgressIndicator and a Text in a Row I want to show the Modal while fetching data from firebase based on a true or false variable on the start of a valid form function, it shows the modal based on a loadingIndicator state variable but when request completed it keep showing after setting the state of loadingIndicator to false. Where need to show and hide the Dialog

 if (_formKey.currentState.validate()) {
                            setState(() {
                              loadingIndicator = true;
                            });

                            loadingIndicator ? loadingAlert(context) : null;

                            AuthService()
                                .signIn(emailController.text,
                                    passwordController.text)
                                .then((user) {
                              switch (user) {
                                case 'ERROR_USER_NOT_FOUND':
                                  setState(() {
                                    _emailError = 'User not found';
                                    loadingIndicator = false;
                                  });
                                  return;
                                  break;

                                case 'ERROR_WRONG_PASSWORD':
                                  setState(() {
                                    _passwordError = 'Password is wrong';
                                    loadingIndicator = false;
                                  });
                                  return;
                                  break;
                              }
} 

loadingAlert(
    BuildContext context,
  ) {
    alertDialog = Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Card(
              child: Material(
            child: Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: 60,
              child: Row(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(left: 20),
                    child: CircularProgressIndicator(),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 20),
                    child: Text(
                      'Please wait...',
                      style: TextStyle(fontSize: 18),
                    ),
                  )
                ],
              ),
            ),
          ))
        ],
      ),
    );

    showDialog(context: context, builder: (_) => alertDialog);
  } 

Dialog show hide when the state of loadingIndicator set to false

Ad

Answer

You can use FutureBuilderfor that and use snapshot.active for request state. More details on the official docs: https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

Try this code:

FutureBuilder(
                future: AuthService()
                    .signIn(emailController.text, passwordController.text),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.active) {
                    showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return CircularProgressIndicator();
                        });
                  }
                  if (snapshot.connectionState == ConnectionState.done) {
                    Navigator.pop(context);
                    switch (snapshot.data) {
                      case 'ERROR_USER_NOT_FOUND':
                        setState(() {
                          _emailError = 'User not found';
                        });
                        return;
                        break;

                      case 'ERROR_WRONG_PASSWORD':
                        setState(() {
                          _passwordError = 'Password is wrong';
                        });
                        return;
                        break;
                    }
                  }
                },
              )
Ad
source: stackoverflow.com
Ad