Flutter - Open & Close Dialog in Drawer

Question

I have simple drawer and I added this to my mainpage's Scaffold with drawer: CustomizedDrawer() line, and the drawer has only 1 ListTile to Login or Log Out the user. In my main page, you can open & close the drawer from left to right.

I'm using Firebase Authentication.

If there is already logged-in user, I can see Log Out text. If I click it, I call logOutUser method in my AuthService class. Here you can see my drawer:

class CustomizedDrawer extends StatelessWidget
{

  @override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: Colors.white,
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Image(
              image: AssetImage("images/myimage.png"),
              alignment: Alignment.center,
            ),
          ),
          checkUserIsLoggedIn(context),
        ],
      ),
    );
  }

  ListTile checkUserIsLoggedIn(context){
    if(FirebaseAuth.instance.currentUser == null) {
      return ListTile(
        title: const Text('Login / Sign Up'),
        onTap: () {
          Navigator.of(context).push(MaterialPageRoute(builder: (context) => LoginScreen()));
        },
      );
    }
    else {
      return ListTile(
        title: const Text('Log out'),
        onTap: () async {
          await showDialog(
              context: context,
              barrierDismissible: false,
              builder: (BuildContext context)
              {
                return ProgressDialog(message: "Please wait...",);
              }
          );
          AuthService authService = AuthService();
          authService.logOutUser(context);
        },
      );
    }
  }
}

Here you can get my logOutUser method in my AuthService class:

void logOutUser(context) async{
    try {
      await FirebaseAuth.instance.signOut()
          .catchError((errMsg){
            Navigator.pop(context);
            displayToastMessage("Error: " + errMsg.toString(), context);
      });
      //Navigator.of(context).push(MaterialPageRoute(builder: (context) => LoginScreen()));
    }
    catch (e){
      showDialog(
          context: context,
          builder: (context)
          {
            return AlertDialog(
              title: Text("Error Message"),
              content: Text(e.toString()),
            );
          }
      );
      Navigator.pop(context);
    }
  }

What I want is; when I click Log Out, I want to see my ProgressDialog,then log out the user, then close the dialog automatically, then close drawer automatically, then I can see my mainpage.

Regarding an answer here , I tried it. I click Log Out, it shows dialog, it log outs, but dialog is not closing and I can't close drawer.

What am I missing? I guess I'm doing something wrong with await and async words, but I need help...

Answer 1

use context of scaffoldKey insteadOf BuildContext to close showDialog(); eg:

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
showDialog(
        context: scaffoldKey.currentContext,
        barrierDismissible: false,
)

or use following code in Drawer

Navigator.pop(context);
  showDialog(
        context: scaffoldKey.currentContext,
        barrierDismissible: false,
        builder: (_) => Center(
              child: Container(
                height: MediaQuery.of(context).size.height * .6,
                width: MediaQuery.of(context).size.width * .9,
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: .5),
                    borderRadius:
                        BorderRadius.only(topLeft: Radius.circular(0)),
                    color: backGroundColor),
                child: Column(
                  children: [
                    Row(
                      children: [
                        SizedBox(width: MediaQuery.of(context).size.width * .3),
                        Text(
                          'My Profile',
                          style:
                          TextStyle(fontSize: 22, color: Colors.white),
                        ),
                        Spacer(),
                        GestureDetector(
                            onTap: () {
                              Navigator.pop(context);
                            },
                            child: Icon(
                              Icons.clear,
                              color: Colors.white,
                              size: 30,
                            )),
                        SizedBox(
                          width: 10,
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ));

Answer 2

In logOutUser function, you just close the dialog when an error occurs, otherwise it don't close the dialog.

You can add Navigator.pop(context) into try block after signOut function like this:

void logOutUser(context) async {
  try {
    await FirebaseAuth.instance.signOut()
        .catchError((errMsg){
          Navigator.pop(context);
          displayToastMessage("Error: " + errMsg.toString(), context);
    });
    Navigator.pop(context); // close dialog after sign out
    Navigator.pop(context); // close drawer
  }
  catch (e){...}
}