Question 182865 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Is there a better way than this to control dialog?

I am using dialog when screen loads. The problem is that if user closes the dialog and after that the pop function for dialog is triggered, then it will pop the page instead of dialog. (Navigator.pop(context). So I came up with a solution to use global key for dialog. Now the function detects if global key is mounted then it pops else not. I want to know if there is any better and shorter method.

I am using Navigator.pop(context) for dialog to pop. But if user closes the dialog box before closing itself, then it pops the page instead of dialog box.

  void loadingDialog() {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: AlertDialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            key: dashboardLoadingDialogKey,
            backgroundColor: const Color(0xFF15000D),
            content: Container(
              padding: const EdgeInsets.all(15),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  const CircularProgressIndicator(
                    color: Colors.amber,
                  ),
                  const SizedBox(height: 20),
                  Text(
                    'LOADING',
                    textAlign: TextAlign.center,
                    style: dialogAmber,
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

T

    if (response.statusCode == 200 && mounted) {
        // dashboard loading dialog pop
        if (dashboardLoadingDialogKey.currentContext != null &&
            dashboardLoadingDialogKey.currentContext!.mounted) {
          Navigator.of(dashboardLoadingDialogKey.currentContext!).pop();
        }
      }

This is the function for dialog and I am using global key, and this is how I am popping it

Tags:

3

Answers


  1. 0

    Loading dialog shouldn’t be closed/popped by the user. So, I would wrap my builder widget with WillPopScope as the following so that it can be popped only programmatically:

    showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: AlertDialog(
        // ...
      ),
    );
  },
);
    Login or Signup to reply.
  2. 0

    I would recommend that you do not do this via the Navigator, but simply use the Overlay or a Stack and simply use a bool there to indicate whether the overlay should be displayed.
    This approach is also more compatible with most state management systems than manually pushing and popping dialogs. For the user, it would look identical if it was designed accordingly.

    Login or Signup to reply.
  3. 0

    It will pop all other route except base first route. It will help a lot when if you are using show dialog. If you used Navigator.pop(context), sometimes all route will be pop because of user interaction.

    Navigator.popUntil(context, (route) => route.isFirst);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search