Flutter Dialog Widgets: Displaying Modal Content

Dialog widgets are essential for displaying modal content and facilitating user interactions in Flutter applications. Let's explore the various dialog widgets and how to use them effectively.

1. Basic Dialog Widgets

AlertDialog

class AlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Alert Dialog'),
            content: Text('This is an alert dialog example.'),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('Cancel'),
              ),
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('OK'),
              ),
            ],
          ),
        );
      },
      child: Text('Show Alert Dialog'),
    );
  }
}

SimpleDialog

class SimpleDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) => SimpleDialog(
            title: Text('Simple Dialog'),
            children: [
              SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(context, 'Option 1');
                },
                child: Text('Option 1'),
              ),
              SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(context, 'Option 2');
                },
                child: Text('Option 2'),
              ),
              SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(context, 'Option 3');
                },
                child: Text('Option 3'),
              ),
            ],
          ),
        );
      },
      child: Text('Show Simple Dialog'),
    );
  }
}

2. Advanced Dialog Widgets

Dialog

class DialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) => Dialog(
            child: Container(
              padding: EdgeInsets.all(16),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    'Custom Dialog',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 16),
                  Text('This is a custom dialog example.'),
                  SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Text('Close'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      },
      child: Text('Show Custom Dialog'),
    );
  }
}

BottomSheet

class BottomSheetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) => Container(
            padding: EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Bottom Sheet',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 16),
                Text('This is a bottom sheet example.'),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text('Close'),
                ),
              ],
            ),
          ),
        );
      },
      child: Text('Show Bottom Sheet'),
    );
  }
}

3. Custom Dialog Widgets

Custom Dialog

class CustomDialog extends StatelessWidget {
  final String title;
  final String content;
  final List<Widget> actions;

  const CustomDialog({
    required this.title,
    required this.content,
    required this.actions,
  });

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 16),
            Text(content),
            SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: actions,
            ),
          ],
        ),
      ),
    );
  }
}

Custom Bottom Sheet

class CustomBottomSheet extends StatelessWidget {
  final String title;
  final String content;
  final List<Widget> actions;

  const CustomBottomSheet({
    required this.title,
    required this.content,
    required this.actions,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(16),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 16),
          Text(content),
          SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: actions,
          ),
        ],
      ),
    );
  }
}

4. Best Practices

1. Implement proper dialogs

   • Choose appropriate dialog widgets
   • Handle dialog states
   • Consider user experience

2. Enhance dialog experience

   • Add smooth animations
   • Implement proper actions
   • Consider accessibility

3. Optimize dialog performance

   • Use const constructors
   • Minimize rebuilds
   • Handle memory efficiently

By mastering these dialog widgets and following best practices, you can create Flutter applications that are:

• More interactive
• More user-friendly
• More efficient
• More maintainable