Styled Bottom Sheet

Unlike the other components, the styled bottom sheet is a function, not a widget class — it wraps showModalBottomSheet and builds the styled chrome around your content. Source: styled_bottom_sheet.dart.

final result = await showStyledBottomSheet<bool>(
  context: context,
  child: FeedbackForm(),
);

API

Future<T?> showStyledBottomSheet<T>({
  required BuildContext context,
  bool hideCloseButton = false,
  bool enableDrag = true,
  VoidCallback? onClose,
  required Widget child,
})

Parameter	Default	Notes
`context`	required	Modal is pushed on this context’s navigator
`child`	required	Sheet content, padded 24 horizontal / 32 vertical
`hideCloseButton`	`false`	Hide the corner close button
`enableDrag`	`true`	Drag-to-dismiss
`onClose`	`Navigator.pop`	Custom close handling

Behavior & anatomy

Renders as a floating card, not an edge-to-edge sheet: a StyledCard with radius 24 and surfaceBg fill, inset 8 px from the sides and 16 px from the bottom (plus the keyboard inset — the sheet rises with the keyboard via viewInsets).
isScrollControlled: true — the sheet sizes to its content, beyond half-screen if needed.
isDismissible: false — tapping the barrier does not dismiss; users close via the button, drag, or your own actions. Keep the close button visible unless you provide an explicit alternative.
The close button is a rotated add_circle_sharp icon (45° → an ×) at the top-right.
Returns the modal’s Future<T?> — resolve it with Navigator.pop(context, value).

Tokens consumed

surfaceBg (card fill); the close icon inherits IconButtonTheme (contrastMedium).

Real usage

lib/widgets/feedback/feedback_rating_form.dart presents the session-feedback flow in a styled sheet.

Getting Started

Craft and Foundations

Brand

Design System

For Agents

Styled Bottom Sheet

API

Behavior & anatomy

Tokens consumed

Real usage