Showing Dialogs and Bottom Sheets
1. Using showDialog() Method
| Property | Description | Example |
|---|---|---|
| context | The BuildContext to show the dialog in | BuildContext context |
| builder | A function that builds the dialog widget | (BuildContext context) => AlertDialog(...) |
| routeSettings | Optional route settings for the dialog | RouteSettings(name: 'dialog') |
Example: Basic Dialog
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Dialog Title'),
content: Text('This is a simple dialog.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);Example: Dialog with Custom Widget
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Custom Dialog'),
SizedBox(height: 10),
Text('This dialog contains custom content.'),
],
),
),
);
},
);
Note: The
showDialog method returns a Future that completes when the dialog is closed. You can await this future to perform actions after the dialog is dismissed.
2. Using AlertDialog Widget
| Property | Values | Description |
|---|---|---|
| title | Widget? |
Dialog title, displayed at the top |
| content | Widget? |
Main content area of the dialog |
| actions | List<Widget> |
Button row at the bottom (e.g., OK, Cancel) |
| backgroundColor | Color? |
Background color of the dialog |
| shape | BoxShape? |
Shape of the dialog (e.g., RoundedRectangleBorder) |
Example: Basic AlertDialog
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert Title'),
content: Text('This is the dialog content.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
Note: AlertDialogs are modal and block interaction with the underlying screen until dismissed.
Example: AlertDialog with Icon
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Row(
children: [
Icon(Icons.warning),
SizedBox(width: 10),
Text('Warning'),
],
),
content: Text('This action cannot be undone.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Confirm'),
),
],
);
},
);3. Using SimpleDialog Widget
| Property | Values | Description |
|---|---|---|
| title | Widget? |
Optional title widget displayed at the top of the dialog |
| children | List<Widget> |
List of widgets to display inside the dialog body |
| actions | List<Widget> |
Optional list of action buttons (e.g., OK, Cancel) |
| contentPadding | EdgeInsets? |
Padding around the dialog content |
Example: Basic SimpleDialog Usage
SimpleDialog(
title: Text('Choose an option'),
children: [
SimpleDialogItem(
child: Text('Option 1'),
onPressed: () {
Navigator.pop(context, 'option1');
},
),
SimpleDialogItem(
child: Text('Option 2'),
onPressed: () {
Navigator.pop(context, 'option2');
},
),
],
)
Note: The
SimpleDialogItem is a custom widget that wraps each item in the dialog. It's not part of Flutter's core API but is commonly used to provide consistent styling.
4. Using showModalBottomSheet() Method
| Property | Values | Description |
|---|---|---|
| context | BuildContext |
The build context to show the bottom sheet in |
| builder | WidgetBuilder |
A function that builds the content of the bottom sheet |
| isScrollControlled | bool |
Whether the bottom sheet can be resized to full screen |
| isDismissible | bool |
Whether the bottom sheet can be dismissed by tapping outside |
| shape | BorderRadius |
The shape of the bottom sheet's corners |
Example: Showing a basic bottom sheet
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
child: Column(
children: [
ListTile(
title: Text('Option 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: Text('Option 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
);
},
);Example: Using scroll-controlled bottom sheet
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.5,
child: Column(
children: [
Text('Scrollable content'),
Expanded(
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
),
),
],
),
);
},
);5. Using showBottomSheet() Method
| Property | Values | Description |
|---|---|---|
| context | BuildContext |
The build context to show the bottom sheet in |
| builder | WidgetBuilder |
A function that builds the content of the bottom sheet |
| isScrollControlled | bool |
Whether the bottom sheet should be scroll-controlled (default: false) |
| backgroundColor | Color |
Background color of the bottom sheet (default: null) |
| elevation | double |
Elevation of the bottom sheet (default: 0.0) |
Example: Basic Bottom Sheet
showBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
child: Column(
children: [
ListTile(
title: Text('Option 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: Text('Option 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
);
},
);Example: Scrollable Bottom Sheet
showBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.5,
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
),
);
},
);
Note: The
isScrollControlled property is useful for making bottom sheets that can expand to fill available space or scroll when content exceeds the screen height.
6. Using SnackBar Widget
A SnackBar is a lightweight, non-modal message that appears at the bottom of the screen to provide brief feedback about an operation. It can be dismissed automatically or manually by the user.
| Property | Description | Values |
|---|---|---|
| content | The main content of the SnackBar | Widget |
| backgroundColor | Background color of the SnackBar | Color |
| duration | How long the SnackBar remains visible | Duration |
| action | Optional action button to appear on the SnackBar | SnackBarAction |
Example: Showing a SnackBar
SnackBar(
content: Text('This is a SnackBar'),
backgroundColor: Colors.blue,
duration: Duration(seconds: 3),
)Example: Adding an Action to a SnackBar
SnackBar(
content: Text('Item removed'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Handle undo logic
},
),
)
Note: SnackBar is displayed using
Scaffold.of(context).showSnackBar(...).
7. Using showDatePicker() Method
| Property | Values | Description |
|---|---|---|
| context | BuildContext |
The build context of the current widget. |
| firstDate | DateTime |
The earliest date that can be selected. |
| lastDate | DateTime |
The latest date that can be selected. |
| initialDate | DateTime |
The initially selected date. |
| onSelect | Function(DateTime) |
Callback function when a date is selected. |
| initialEntryMode | DatePickerEntryMode.calendar or DatePickerEntryMode.input |
Determines whether to show the calendar or input field first. |
Example: Using showDatePicker()
showDatePicker(
context: context,
firstDate: DateTime(2020),
lastDate: DateTime(2030),
initialDate: DateTime.now(),
onSelect: (date) {
print('Selected date: $date');
},
);8. Using showTimePicker() Method
| Property | Values | Description |
|---|---|---|
| context | BuildContext |
The build context to show the dialog in. |
| initialTime | TimeOfDay |
The time to display initially in the picker. |
| helpText | String? |
Optional text to display as help text above the picker. |
| confirmText | String? |
Optional text for the confirm button. |
| cancelText | String? |
Optional text for the cancel button. |
Example: Showing a Time Picker
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
helpText: 'Select a time',
confirmText: 'OK',
cancelText: 'Cancel',
).then((selectedTime) {
if (selectedTime != null) {
print('Selected time: $selectedTime');
}
});9. Using showMenu() and PopupMenuButton Widget
| Property | Description | Values |
|---|---|---|
| item | Represents a single menu item in the popup menu | PopupMenuEntry<T> |
| onSelected | Callback function when a menu item is selected | void Function(T) |
| onCanceled | Callback function when the menu is dismissed without selection | void Function() |
Example: Using PopupMenuButton
PopupMenuButton<String>(
onSelected: (String result) {
print('Selected: $result');
},
itemBuilder: (BuildContext context) => [
const PopupMenuItem<String>(
value: 'option1',
child: Text('Option 1'),
),
const PopupMenuItem<String>(
value: 'option2',
child: Text('Option 2'),
),
],
)Example: Using showMenu()
showMenu<String>(
context: context,
items: [
const PopupMenuItem<String>(
value: 'option1',
child: Text('Option 1'),
),
const PopupMenuItem<String>(
value: 'option2',
child: Text('Option 2'),
),
],
position: RelativeRect.fromLTRB(100, 100, 0, 0),
).then((String? value) {
if (value != null) {
print('Selected: $value');
}
});
Note:
PopupMenuButton is a widget that builds a button to show a menu, while showMenu is a function that displays a menu at a specific position.
Key Differences
- PopupMenuButton: A widget that provides a button to trigger the menu.
- showMenu: A function that displays a menu at a specific position without requiring a button.
10. Creating Custom Dialogs
| Property | Description | Example |
|---|---|---|
| backgroundColor | Background color of the dialog | Colors.white |
| elevation | Shadow elevation of the dialog | 8.0 |
| shape | Shape of the dialog (e.g., RoundedRectangleBorder) | RoundedRectangleBorder(radius: BorderRadius.circular(12)) |
| constraints | Constraints to apply to the dialog (e.g., max width/height) | BoxConstraints(maxWidth: 300, maxHeight: 200) |
Example: Custom Dialog with Title and Actions
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
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.'),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
),
],
),
),
);
},
);
Note: Dialogs in Flutter are typically shown using
showDialog and built with Dialog widget.
11. Using DraggableScrollableSheet Widget
The DraggableScrollableSheet widget in Flutter allows you to create a sheet that can be dragged to expand or collapse, and it works well with scrollable content inside it.
| Property | Description | Values |
|---|---|---|
| child | The scrollable content inside the sheet. | Widget |
| initialChildSize | The initial size of the sheet as a fraction of the total height. | double |
| minChildSize | The minimum size the sheet can shrink to. | double |
| maxChildSize | The maximum size the sheet can expand to. | double |
Example: Basic DraggableScrollableSheet
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("DraggableSheet Example")),
body: DraggableScrollableSheet(
initialChildSize: 0.5,
minChildSize: 0.25,
maxChildSize: 0.8,
child: Container(
color: Colors.blue,
child: ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(
title: Text("Item $index"),
);
},
),
),
),
),
);
}
}