Skip to main content

​
Overview

HuxBottomSheet is a mobile-first modal component that slides up from the bottom of the screen. It is designed to be thumb-friendly and support drag gestures, making it the standard way to present options, forms, and content on mobile devices. The package also includes HuxActionSheet, a specialized version of the bottom sheet for presenting a list of actionable items, similar to iOS-style action sheets.

​
Basic Usage

​
Standard Bottom Sheet

showHuxBottomSheet(
  context: context,
  title: 'Information',
  child: Text('This is a bottom sheet with some content.'),
);

​
Action Sheet

showHuxActionSheet(
  context: context,
  title: 'Share Options',
  actions: [
    HuxActionSheetItem(
      label: 'Email',
      icon: LucideIcons.mail,
      onTap: () => shareViaEmail(),
    ),
    HuxActionSheetItem(
      label: 'Copy Link',
      icon: LucideIcons.link,
      onTap: () => copyLink(),
    ),
  ],
);

​
HuxBottomSheet

​
Sizes

Control the height of the bottom sheet using fixed variants:
  • HuxBottomSheetSize.small - Takes ~25-30% of screen height
  • HuxBottomSheetSize.medium - Takes ~50% of screen height (Default)
  • HuxBottomSheetSize.large - Takes ~85% of screen height
  • HuxBottomSheetSize.fullscreen - Takes the full screen height
showHuxBottomSheet(
  context: context,
  title: 'Large Sheet',
  size: HuxBottomSheetSize.large,
  child: MyComplexForm(),
);

​
Header Options

You can customize the header with a title, subtitle, and control buttons:
  • title: Main heading text
  • subtitle: Supporting text below the title
  • showDragHandle: Whether to show the top drag indicator (Default: true)
  • showCloseButton: Whether to show a close action in the header (Default: false)
showHuxBottomSheet(
  context: context,
  title: 'Settings',
  subtitle: 'Configure your app experience',
  showCloseButton: true,
  child: SettingsList(),
);

​
Action Buttons

Bottom sheets can include a row of action buttons at the bottom: 
showHuxBottomSheet(
  context: context,
  title: 'Confirm Delete',
  child: Text('Are you sure you want to delete this item?'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.pop(context),
      variant: HuxButtonVariant.secondary,
      child: Text('Cancel'),
    ),
    HuxButton(
      onPressed: () => deleteItem(),
      child: Text('Delete'),
    ),
  ],
);

​
HuxActionSheet

showHuxActionSheet is optimized for lists of actions. Each item is represented by a HuxActionSheetItem.

​
Destructive Actions

Mark actions as destructive to style them with the theme’s destructive color: 
HuxActionSheetItem(
  label: 'Delete Record',
  icon: LucideIcons.trash2,
  isDestructive: true,
  onTap: () => deleteRecord(),
)

​
Disabled Actions

Actions can be disabled if they are currently unavailable: 
HuxActionSheetItem(
  label: 'Share (Login required)',
  icon: LucideIcons.share2,
  isDisabled: true,
  onTap: () {},
)

​
API Reference

​
showHuxBottomSheet Properties

PropertyTypeDefaultDescription
contextBuildContextrequiredThe current build context
titleString?nullOptional header title
subtitleString?nullOptional header subtitle
childWidget?nullMain content widget
actionsList<Widget>?nullAction buttons at the bottom
sizeHuxBottomSheetSizemediumHeight variant of the sheet
showDragHandlebooltrueWhether to show the top handle
showCloseButtonboolfalseWhether to show close button
isDismissiblebooltrueWhether tapping outside dismisses
enableDragbooltrueWhether drag gestures are enabled

​
showHuxActionSheet Properties

PropertyTypeDefaultDescription
contextBuildContextrequiredThe current build context
actionsList<HuxActionSheetItem>requiredList of action items
titleString?nullOptional header title
subtitleString?nullOptional header subtitle
cancelLabelString'Cancel'Label for the cancel button
showCancelbooltrueWhether to show cancel button

​
Accessibility

  • Focus Management: The bottom sheet handles focus trapping and restoration.
  • Gestures: Drag handle provides a visual hint for dismissible content.
  • Contrast: All text and icons follow theme-aware contrast rules.
  • Semantic Roles: Action items use proper list and button semantics.