Flutter Web - How to close dialog opened when the user clicks back button in web browser?

Question

I use Getx for my application navigation. I navitage from '/home_screen' to '/user_screen', then I open dialog in '/user_screen'. When I press back button in web browser, I want to close dialog and navigate back from '/user_screen' to '/home' screen, but it does'nt. This is my Code show dialog.

Container(
      margin: const EdgeInsets.only(left: 10, right: 10),
      child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(4),
            ),
            backgroundColor: Get.theme.colorScheme.primary,
          ),
          onPressed: () {
            //show Dialog
            Get.dialog(_createFormDialog(context));
          },
          child: Text(
            "Create Form",
            style: AppStyle.bodyMedium.copyWith(color: Get.theme.colorScheme.onPrimary),
          )),
    ),

This is my Dialog

Widget _createFormDialog(BuildContext context) {
controller.descriptionEditorController.clear();
return AlertDialog(
  title: Text(
    "lbl_create_form".tr,
    style: AppStyle.headingMedium.copyWith(color: context.theme.listTileTheme.selectedTileColor),
  ),
  content: AnimatedContainer(
    duration: const Duration(milliseconds: 300),
    width: Get.width * 0.7,
    height: Get.height * 0.8,
    child: SingleChildScrollView(
      
    ),
  ),
  actions: [
    Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
      ],
    )
  ],
);

}

And navigation code:

Get.rootDelegate.toNamed(Routes.home);

Help me, please!

Answer 1

I listen press back button in web browser event using:

import 'dart:html' as html;

And then:

html.window.onPopState.listen((_) {
      final navigator = Navigator.of(context, rootNavigator: true);
      if (navigator.canPop()) {
        navigator.pop();
      }
    });

I using GetRouterOutlet.builder and put that code:

class HomeScreen extends GetWidget<HomeController> {
   HomeScreen({super.key});

   final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

   @override
   Widget build(BuildContext context) {
     return GetRouterOutlet.builder(
       builder: (context, delegate, currentRoute) {
         final currentLocation = currentRoute?.location;
         html.window.onPopState.listen((_) {
           final navigator = Navigator.of(context, rootNavigator: true);
           if (navigator.canPop()) {
             navigator.pop();
           }
         });
         return Scaffold(
             key: scaffoldKey,
             extendBodyBehindAppBar: false,
             //appBar: topNavigationBar(context, scaffoldKey),
             drawer: Drawer(child: SideMenu(current: currentRoute?.location)),
             body: SafeArea(
                 child: Row(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 if ResponsiveWrapper.of(context).isLargerThan(MOBILE)) SideMenu(current: currentRoute?.location),
                 Expanded(
                   flex: 1,
                   child: Container(
                     color: context.theme.colorScheme.background,
                     padding: const EdgeInsets.only(left: 8, top: 24, bottom: 22, right: 20),
                     child: Column(
                       children: [
                         Header(keyGlobal: scaffoldKey),
                         Expanded(
                             child: GetRouterOutlet(
                           key: Get.nestedKey(Routes.home),
                           initialRoute: Routes.generalInformation,
                         ))
                       ],
                     ),
                   ),
                 )
               ],
             )));
       },
     );
   }
 }

Answer 2

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Result'),
    content: Text('Result is $_result'),
    actions: [
      ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'))
    ],
  ),
);

now using using this context you can close the dialogue anywhere