Flutter Dialogs & Alerts

Creating interactive popup messages

💬 What are Dialogs & Alerts?

Dialogs and alerts display important messages or request user input. They appear as popup windows over your app, perfect for confirmations, warnings, or collecting quick information from users. 


// Simple AlertDialog
showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Hello'),
    content: Text('This is a dialog'),
  ),
)

Types of Dialogs

⚠️

AlertDialog

Standard alert messages 

AlertDialog(
  title: Text('Alert'),
  content: Text('Message'),
  actions: [
    TextButton(
      onPressed: () {},
      child: Text('OK'),
    ),
  ],
)
📋

SimpleDialog

List of options 

SimpleDialog(
  title: Text('Choose'),
  children: [
    SimpleDialogOption(
      child: Text('Option 1'),
      onPressed: () {},
    ),
  ],
)
📱

BottomSheet

Slide up from bottom 

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      child: Text('Bottom Sheet'),
    );
  },
)
🎨

Custom Dialog

Fully customized 

showDialog(
  context: context,
  builder: (context) => Dialog(
    child: Container(
      // Custom content
    ),
  ),
)

🔹 Basic AlertDialog Example

Create a simple confirmation dialog: 

import 'package:flutter/material.dart';

class MyAlertDialog extends StatelessWidget {
  void _showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Delete Item?'),
          content: Text('Are you sure you want to delete this item?'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop(); // Close dialog
              },
              child: Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                // Perform delete action
                Navigator.of(context).pop();
              },
              child: Text('Delete', style: TextStyle(color: Colors.red)),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Alert Dialog')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showAlertDialog(context),
          child: Text('Show Alert'),
        ),
      ),
    );
  }
}

Output:

Delete Item?

Are you sure you want to delete this item?

🔹 SimpleDialog Example

Create a dialog with 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, 'Option 1');
            },
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 8),
              child: Text('Option 1'),
            ),
          ),
          SimpleDialogOption(
            onPressed: () {
              Navigator.pop(context, 'Option 2');
            },
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 8),
              child: Text('Option 2'),
            ),
          ),
          SimpleDialogOption(
            onPressed: () {
              Navigator.pop(context, 'Option 3');
            },
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 8),
              child: Text('Option 3'),
            ),
          ),
        ],
      );
    },
  );
}

Output:

Choose an Option

Option 1
Option 2
Option 3

🔹 BottomSheet Example

Create a modal bottom sheet: 

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
    ),
    builder: (BuildContext context) {
      return Container(
        padding: EdgeInsets.all(20),
        height: 250,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Share',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Message'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.email),
              title: Text('Email'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.link),
              title: Text('Copy Link'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      );
    },
  );
}

Output:

Share

💬 Message
📧 Email
🔗 Copy Link

🔹 Custom Dialog Example

Create a fully customized dialog: 

void _showCustomDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Container(
          padding: EdgeInsets.all(20),
          height: 300,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.check_circle, color: Colors.green, size: 80),
              SizedBox(height: 20),
              Text(
                'Success!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              Text(
                'Your action was completed successfully.',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.grey),
              ),
              SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  padding: EdgeInsets.symmetric(horizontal: 40, vertical: 12),
                ),
                child: Text('OK'),
              ),
            ],
          ),
        ),
      );
    },
  );
}

Output:

✓

Success!

Your action was completed successfully.

🔹 Dialog Best Practices

Tips for using Dialogs:

  • Keep it simple - Clear message and limited options
  • Use appropriate type - AlertDialog for confirmations, SimpleDialog for choices
  • Always provide exit - Include cancel or close button
  • Consider barrierDismissible - Allow tapping outside to close
  • Use BottomSheet for mobile-friendly options

🧠 Test Your Knowledge

Which function is used to display a dialog?