Home > Software design >  Flutter GetX - How to dismiss bottom dialog?
Flutter GetX - How to dismiss bottom dialog?

Time:12-21

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);
    });

CodePudding user response:

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
  }
});

CodePudding user response:

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();
}
  • Related