showSubZeroBottomSheet<T> function

Future<T?> showSubZeroBottomSheet<T>({
  1. required BuildContext context,
  2. required WidgetBuilder builder,
  3. SubZeroBottomSheetConfig config = const SubZeroBottomSheetConfig(),
})

Shows a SubZero styled modal bottom sheet (mobile) or dialog (desktop).

The sheet automatically adapts to screen size:

  • On mobile: Shows as a modal bottom sheet with floating close button
  • On desktop: Shows as a centered modal dialog

Example:

showSubZeroBottomSheet(
  context: context,
  builder: (context) => SubZeroBottomSheetContent(
    kicker: 'Step 1',
    title: 'Add your recommendation',
    description: 'Select a recommendation to add to your journey.',
    primaryButtonLabel: 'Continue',
    onPrimaryPressed: () => Navigator.pop(context),
  ),
);

Implementation

Future<T?> showSubZeroBottomSheet<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  SubZeroBottomSheetConfig config = const SubZeroBottomSheetConfig(),
}) {
  final screenWidth = MediaQuery.of(context).size.width;
  final isDesktop = screenWidth >= config.desktopBreakpoint;

  if (isDesktop) {
    return _showDesktopDialog<T>(
      context: context,
      builder: builder,
      config: config,
    );
  } else {
    return _showMobileModalBottomSheet<T>(
      context: context,
      builder: builder,
      config: config,
    );
  }
}