flutter
/

GetX Dialog: Context‑Free Dialogs in Flutter

Last Sync: Today

On this page

13
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

GetX Dialog: Context‑Free Dialogs in Flutter

What is GetX Dialog?

GetX provides a simple, context‑free way to show dialogs anywhere in your app. Unlike Flutter's native showDialog, you don't need a BuildContext. This makes it perfect for showing alerts, confirmation dialogs, or custom popups from controllers, services, or any Dart class. You can also return values from dialogs and control whether the user can dismiss them by tapping outside.

Basic Usage: Get.dialog

Get.dialog accepts a widget (usually AlertDialog or a custom widget) and shows it as a modal dialog. The method returns a Future that resolves when the dialog is closed.

DARTRead-only
1
Get.dialog(
  AlertDialog(
    title: Text('Alert'),
    content: Text('This is a simple dialog'),
    actions: [
      TextButton(
        onPressed: () => Get.back(),
        child: Text('OK'),
      ),
    ],
  ),
);

Returning Values

You can await the dialog and return a value using Get.back(result: value).

DARTRead-only
1
Future<void> showConfirmation() async {
  final confirmed = await Get.dialog(
    AlertDialog(
      title: Text('Confirm'),
      content: Text('Are you sure?'),
      actions: [
        TextButton(
          onPressed: () => Get.back(result: false),
          child: Text('Cancel'),
        ),
        TextButton(
          onPressed: () => Get.back(result: true),
          child: Text('Yes'),
        ),
      ],
    ),
  );

  if (confirmed == true) {
    // do something
  }
}

Custom Dialogs

You can pass any widget to Get.dialog. This allows you to create fully custom dialogs with any layout.

DARTRead-only
1
Get.dialog(
  Center(
    child: Container(
      width: 300,
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.info, size: 50, color: Colors.blue),
          SizedBox(height: 10),
          Text('Custom Dialog', style: TextStyle(fontSize: 18)),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => Get.back(),
            child: Text('Close'),
          ),
        ],
      ),
    ),
  ),
);

Get.defaultDialog – Quick Alert Dialogs

For standard alert dialogs, GetX provides Get.defaultDialog. It's a convenient wrapper with common parameters.

DARTRead-only
1
Get.defaultDialog(
  title: 'Alert',
  middleText: 'This is an alert dialog',
  textConfirm: 'OK',
  textCancel: 'Cancel',
  onConfirm: () => Get.back(),
  onCancel: () => Get.back(),
);

Parameters for Get.defaultDialog

  • title – The dialog title (String).
  • titleStyle – TextStyle for the title.
  • middleText – The main message (String).
  • middleTextStyle – TextStyle for the message.
  • textConfirm – Text for the confirm button.
  • textCancel – Text for the cancel button.
  • onConfirm – Callback when confirm is pressed.
  • onCancel – Callback when cancel is pressed.
  • confirmTextColor – Color of confirm button text.
  • cancelTextColor – Color of cancel button text.
  • buttonColor – Background color of buttons.
  • radius – Border radius of the dialog.
  • content – Custom widget instead of middleText.
  • barrierDismissible – Whether tapping outside dismisses the dialog (default false).

Comparison: GetX Dialog vs Native showDialog

AspectGetX DialogNative showDialog
Requires BuildContextNoYes
Can be called from controller/serviceYesNo (needs context)
Return value supportYes (Future)Yes (Future)
Barrier controlYes (barrierDismissible)Yes (barrierDismissible)
Default alert wrapperGet.defaultDialogAlertDialog (manual)

Using with Controllers

Because Get.dialog doesn't need a context, you can call it directly from a controller. This keeps your UI code clean and moves dialog logic to the business layer.

DARTRead-only
1
class HomeController extends GetxController {
  void showDeleteConfirmation(int id) {
    Get.defaultDialog(
      title: 'Delete Item',
      middleText: 'Are you sure you want to delete this item?',
      textConfirm: 'Delete',
      textCancel: 'Cancel',
      confirmTextColor: Colors.white,
      onConfirm: () {
        deleteItem(id);
        Get.back(); // close dialog
        Get.snackbar('Deleted', 'Item removed');
      },
    );
  }

  void deleteItem(int id) { /* API call */ }
}

Barrier Dismissible

Control whether the user can dismiss the dialog by tapping outside it. Use the barrierDismissible parameter.

DARTRead-only
1
Get.dialog(
  AlertDialog(...),
  barrierDismissible: false, // user must tap a button to close
);

Dismissing Dialogs

Use Get.back() to dismiss the currently active dialog. You can also provide a result that will be returned to the caller.

DARTRead-only
1
// Inside the dialog
ElevatedButton(
  onPressed: () => Get.back(result: 'closed'),
  child: Text('Close'),
);

Best Practices

  • Use Get.defaultDialog for simple alerts – It's concise and follows material design.
  • Use Get.dialog for custom layouts – Provides full control over appearance.
  • Always provide a way to close the dialog – Ensure at least one button or gesture to dismiss.
  • Use barrierDismissible: false for critical confirmations – Prevents accidental dismissal.
  • Return values when needed – Use await to handle user choices.
  • Call from controllers when possible – Keep UI widgets free of dialog logic.

Common Mistakes

  • ❌ Forgetting to call Get.back() – Dialog stays on screen and blocks interaction. ✅ Always close dialogs when user makes a choice.
  • ❌ Using Get.dialog without GetMaterialApp – Dialogs won't render. ✅ Ensure your app uses GetMaterialApp (or GetCupertinoApp).
  • ❌ Not handling the returned Future – You might miss the user's selection. ✅ Await the dialog and act on the result.
  • ❌ Overusing dialogs – Too many dialogs frustrate users. ✅ Use dialogs only for important decisions or alerts.

Conclusion

GetX dialogs make it incredibly easy to show popups and alerts without worrying about BuildContext. Whether you need a simple alert or a fully custom modal, Get.dialog and Get.defaultDialog provide a clean, context‑free solution. Combine them with GetX state management for a seamless user experience.

Try it yourself

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: DialogDemo(),
    );
  }
}

class DialogDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Dialog Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Get.defaultDialog(
                  title: 'Alert',
                  middleText: 'This is a default dialog',
                  textConfirm: 'OK',
                  textCancel: 'Cancel',
                  onConfirm: () {
                    Get.back();
                    Get.snackbar('Confirmed', 'You pressed OK');
                  },
                  onCancel: () => Get.back(),
                );
              },
              child: Text('Default Dialog'),
            ),
            ElevatedButton(
              onPressed: () async {
                final result = await Get.dialog(
                  AlertDialog(
                    title: Text('Confirm'),
                    content: Text('Are you sure?'),
                    actions: [
                      TextButton(
                        onPressed: () => Get.back(result: false),
                        child: Text('No'),
                      ),
                      TextButton(
                        onPressed: () => Get.back(result: true),
                        child: Text('Yes'),
                      ),
                    ],
                  ),
                );
                if (result == true) {
                  Get.snackbar('Confirmed', 'You said yes');
                } else if (result == false) {
                  Get.snackbar('Cancelled', 'You said no');
                }
              },
              child: Text('Dialog with Result'),
            ),
            ElevatedButton(
              onPressed: () {
                Get.dialog(
                  Center(
                    child: Container(
                      width: 250,
                      padding: EdgeInsets.all(20),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(Icons.star, size: 50, color: Colors.orange),
                          SizedBox(height: 10),
                          Text('Custom Dialog', style: TextStyle(fontSize: 18)),
                          SizedBox(height: 20),
                          ElevatedButton(
                            onPressed: () => Get.back(),
                            child: Text('Close'),
                          ),
                        ],
                      ),
                    ),
                  ),
                  barrierDismissible: false,
                );
              },
              child: Text('Custom Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

Test Your Knowledge

Q1
of 3

Which method is used to show a custom dialog in GetX?

A
Get.alert
B
Get.showDialog
C
Get.dialog
D
Get.defaultDialog
Q2
of 3

How do you return a value from a dialog?

A
Use Get.return(value)
B
Use Get.back(result: value)
C
Use Get.close(value)
D
Use Get.dismiss(value)
Q3
of 3

What parameter prevents tapping outside from dismissing the dialog?

A
dismissible
B
barrierDismissible
C
tapToClose
D
outsideDismiss

Frequently Asked Questions

Can I show a dialog without a `BuildContext`?

Yes! That's the main advantage of GetX dialogs. You can show them from controllers, services, or any Dart class.

How do I prevent the user from tapping outside to dismiss?

Set barrierDismissible: false in Get.dialog (or Get.defaultDialog).

Can I show multiple dialogs at once?

Technically yes, but it's not recommended. Each new dialog will overlay the previous one. Dismiss them in LIFO order.

How do I show a loading dialog?

You can create a custom dialog with a CircularProgressIndicator. Remember to dismiss it when loading is complete.

Does GetX dialog work with Cupertino?

Yes, you can use GetCupertinoApp and show CupertinoAlertDialog inside Get.dialog. The API is the same.

How do I return a value from a dialog?

Use Get.back(result: yourValue) and await the Get.dialog call.

Previous

getx snackbar

Next

getx bottomsheet

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.