How to Show Dialog in Flutter | Flutter ShowDialog Example

Flutter is a popular framework for building cross-platform applications, and one of its essential UI elements is the Dialog Box. In this article, we will explore how to show a dialog in Flutter using the showDialog() function. We will also look at different types of dialogs such as AlertDialog, SimpleDialog, and Custom Dialogs.

What is a Dialog Box in Flutter?

A dialog box in Flutter is a small window that appears on top of the current screen, prompting users to take an action or display information. It helps in providing feedback, taking input, or confirming user decisions.

Flutter provides various types of dialogs:

1. AlertDialog – Used for alerts and confirmations.
2. SimpleDialog – Used for selecting options.
3. Custom Dialog – Used for creating personalized dialogs.

How to Show Dialog in Flutter?

To display a dialog in Flutter, we use the showDialog() function. It takes a BuildContext and a builder function that returns a widget (typically an AlertDialog or SimpleDialog).

Example of ShowDialog in Flutter (Basic Alert Dialog)

Here’s a simple example of how to show a basic AlertDialog in Flutter:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DialogExample(),
    );
  }
}

class DialogExample extends StatelessWidget {
  void showMyDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Flutter Dialog"),
          content: Text("This is a simple AlertDialog in Flutter."),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text("OK"),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter ShowDialog Example")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => showMyDialog(context),
          child: Text("Show Dialog"),
        ),
      ),
    );
  }
}

Explanation:

• showDialog(): This function is used to display the dialog.
• AlertDialog: It creates a simple alert dialog.
• Navigator.of(context).pop(): Closes the dialog when the button is pressed.

---

Types of Dialogs in Flutter

1. AlertDialog in Flutter (With Multiple Buttons)

An AlertDialog can have multiple buttons for different actions. Here’s how you can add Yes and No buttons:

void showConfirmationDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text("Exit Confirmation"),
        content: Text("Are you sure you want to exit?"),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(); // Close dialog
            },
            child: Text("No"),
          ),
          TextButton(
            onPressed: () {
              // Perform exit action
              Navigator.of(context).pop();
            },
            child: Text("Yes"),
          ),
        ],
      );
    },
  );
}

This dialog asks the user for confirmation before exiting.

---

2. SimpleDialog in Flutter (For Options Selection)

A SimpleDialog is useful when the user needs to choose from multiple options.

void showSimpleDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return SimpleDialog(
        title: Text("Choose an Option"),
        children: [
          SimpleDialogOption(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text("Option 1"),
          ),
          SimpleDialogOption(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text("Option 2"),
          ),
        ],
      );
    },
  );
}

This type of dialog is useful for settings and menu options.

---

3. Custom Dialog Box in Flutter (Using Container)

You can create a custom dialog in Flutter by designing it with a Container widget.

void showCustomDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("Custom Dialog", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
              SizedBox(height: 10),
              Text("This is a custom-styled dialog box."),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text("Close"),
              ),
            ],
          ),
        ),
      );
    },
  );
}

This method allows full customization of the dialog box.

---

Best Practices for Using Dialogs in Flutter

• Use dialogs only when necessary to avoid interrupting the user experience.
• Always provide a way to close the dialog, such as a close button or tapping outside the dialog.
• Keep the content concise and meaningful for better user interaction.

---

Conclusion

Dialogs in Flutter are a great way to interact with users, display messages, or request input. You can use:

• AlertDialog for simple alerts and confirmations.
• SimpleDialog for multiple-choice selections.
• Custom Dialog for advanced UI components.

Now that you know how to show a dialog in Flutter, try implementing different types of dialogs in your Flutter applications.

For more such Flutter tutorials, stay tuned! 🚀

---

FAQs

1. How do I close a dialog in Flutter?
You can close a dialog using:

Navigator.of(context).pop();

2. Can I customize the background color of a dialog?
Yes! You can use the Dialog widget with a Container and set a background color.

3. Is it possible to show a full-screen dialog in Flutter?
Yes! You can use showGeneralDialog() or showModalBottomSheet() for a full-screen experience.