Flutter GetX - How to dismiss bottom dialog?

Question

I am using GetX. I am showing two dialogs. One on bottom, One on top. I want dismiss the bottom Dialog when I click a button on the Top Dialog, how to do? Please see the codes below:

    Get.dialog(
        Container(
            width: double.infinity,
            height: double.infinity,
            alignment: Alignment.center,
            child: Text("Bottom Dialog")),
        name: "dialog1");

    Future.delayed(Duration(seconds: 1), () {
      Get.dialog(
          Container(
              width: double.infinity,
              height: double.infinity,
              alignment: Alignment.topRight,
              child: GestureDetector(
                  onTap: () {
                    print("close");

                    Get.removeRoute(GetPageRoute(routeName: "dialog1"));

                    // Get.key.currentState!.removeRoute(GetPageRoute(routeName: "dialog1"));
                  },
                  child: Text("Top Dialog"))),
          navigatorKey: Get.key);
    });

Answer 1

you can dismiss the button by using:

Navigator.pop(context);

Answer 2

you could dismiss the button by using:

Navigator.pop(context);

Implementation as:

showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: Text('Wanna Exit?'),
        actions: [
          FlatButton(
            onPressed: () => Navigator.pop(context, false), // passing false
            child: Text('No'),
          ),
          FlatButton(
            onPressed: () => Navigator.pop(context, true), // passing true
            child: Text('Yes'),
          ),
        ],
      );
    }).then((exit) {
  if (exit == null) return;

  if (exit) {
    // user pressed Yes button
  } else {
    // user pressed No button
  }
});

Answer 3

Showing two dialogues at the same time is not the good UI/UX experience. Instead you can close the bottom dialogue as soon as you open the top dialogue .

To reopen the bottom dialogue again when top dialogue is closed then you can use the return value from the top dialogue using

bool showFirstDialogue = await Get.dialog(DialogueTwo());
if(showFirstDialogue){
   // show first dialogue again here
}

Make sure to return bool value in this case when DialogueTwo is closed.

You could use

Get.back();

The above code snippet does not require any context.

make sure to import the get library

import 'package:get/get.dart';

to have more cleaner version of the code just to close the opened dialogue then you can check for the condition as below:

if(Get.isDialogueOpen){
 Get.back();
}

Answer 4

Navigator.of(Get.overlayContext!, rootNavigator: true).pop();

it is working for me,let's check

Answer 5

Controller

class DialogController extends GetxController {
      final isDialogOpen = RxBool(false);
   }

Declare this controller where the dialog initial

final dialogContoller = Get.put(DialogController());
Dialog:

            Get.dialog(
                barrierDismissible: false,
                Dialog(
                  backgroundColor: Colors.transparent,
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: Obx(
                      () => Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              dialogContoller.isDialogOpen.toggle();
                            },
                            child: Container(
                              width: Get.width,
                              height: 200,
                              decoration: BoxDecoration(
                                color: Colors.amber,
                                borderRadius: BorderRadius.all(
                                  Radius.circular(5),
                                ),
                              ),
                              padding: EdgeInsets.only(
                                  left: 15, right: 15, bottom: 15),
                              child: Center(child: Text('Top Dialog')),
                            ),
                          ),
                          if (!dialogContoller.isDialogOpen.value)
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(height: 100),
                                Container(
                                  width: Get.width,
                                  height: 200,
                                  decoration: BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(5),
                                    ),
                                  ),
                                  padding: EdgeInsets.only(
                                      left: 15, right: 15, bottom: 15),
                                  child:
                                      Center(child: Text('Bottom Dialog')),
                                ),
                              ],
                            ),
                        ],
                      ),
                    ),
                  ),
                ),
              );