What is a modal bottom sheet in Flutter?

Overview

A modal bottom sheet is a sheet that slides up from the bottom of the screen and requires the user to interact with it before returning to the main content. It is typically used for quick actions, confirmations, or menus.

showModalBottomSheet

dartCopy
ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ListTile(
                leading: Icon(Icons.share),
                title: Text('Share'),
                onTap: () => Navigator.pop(context),
              ),
              ListTile(
                leading: Icon(Icons.edit),
                title: Text('Edit'),
                onTap: () => Navigator.pop(context),
              ),
              ListTile(
                leading: Icon(Icons.delete, color: Colors.red),
                title: Text('Delete', style: TextStyle(color: Colors.red)),
                onTap: () => Navigator.pop(context),
              ),
            ],
          ),
        );
      },
    );
  },
  child: Text('Open Bottom Sheet'),
)

Rounded Corners

dartCopy
showModalBottomSheet(
  context: context,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
  ),
  builder: (context) => Padding(
    padding: EdgeInsets.all(16),
    child: Text('Sheet content'),
  ),
)

Scrollable Bottom Sheet

dartCopy
showModalBottomSheet(
  context: context,
  isScrollControlled: true,   // Allow full screen height
  builder: (context) {
    return DraggableScrollableSheet(
      expand: false,
      initialChildSize: 0.5,  // 50% of screen
      minChildSize: 0.25,
      maxChildSize: 0.9,
      builder: (context, scrollController) {
        return ListView.builder(
          controller: scrollController,
          itemCount: 30,
          itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
        );
      },
    );
  },
)

Avoid Keyboard Overlap

dartCopy
showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    return Padding(
      // Adds padding equal to keyboard height
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: TextField(decoration: InputDecoration(labelText: 'Enter text')),
    );
  },
)

Modal vs Persistent Bottom Sheet

showModalBottomSheet

Scaffold.showBottomSheet

Use

textCopy

showModalBottomSheet

for confirmations, action menus, and form inputs. Use persistent bottom sheets for ongoing UI like filters.