ArcaneJaspr Codex
Documentation
🔍
ArcaneActionSheet
Mobile-style action menu with options
Live Demo
Action Sheet Mobile-style action menu

ArcaneActionSheet#

A mobile-style action sheet with a list of options.

Basic Usage#

ArcaneActionSheet(
  isOpen: isOpen,
  onClose: () => close(),
  actions: [
    ActionSheetItem(label: 'Edit', onTap: () => edit()),
    ActionSheetItem(label: 'Share', onTap: () => share()),
    ActionSheetItem(label: 'Delete', onTap: () => delete(), isDestructive: true),
  ],
)

Properties#

PropertyTypeDefaultDescription
isOpen bool required Whether sheet is visible
onClose VoidCallback? null Close handler
actions List<ActionSheetItem> required Action items
title String? null Header title
message String? null Description text
cancelLabel String 'Cancel' Cancel button text

With Title and Message# 

ArcaneActionSheet(
  isOpen: isOpen,
  onClose: () => close(),
  title: 'Delete Item',
  message: 'This action cannot be undone.',
  actions: [
    ActionSheetItem(
      label: 'Delete',
      onTap: () => confirmDelete(),
      isDestructive: true,
    ),
  ],
)

Action Item Properties#

PropertyTypeDefaultDescription
labelStringrequiredAction text
onTap VoidCallback? null Tap handler
isDestructive bool false Red destructive style
icon Component? null Leading icon

With Icons#

ArcaneActionSheet(
  isOpen: isOpen,
  onClose: () => close(),
  actions: [
    ActionSheetItem(
      icon: ArcaneText('📝'),
      label: 'Edit',
      onTap: () => edit(),
    ),
    ActionSheetItem(
      icon: ArcaneText('📤'),
      label: 'Share',
      onTap: () => share(),
    ),
    ActionSheetItem(
      icon: ArcaneText('🗑'),
      label: 'Delete',
      onTap: () => delete(),
      isDestructive: true,
    ),
  ],
)

Examples#

Photo Options#

ArcaneActionSheet(
  isOpen: showPhotoOptions,
  onClose: () => close(),
  title: 'Change Photo',
  actions: [
    ActionSheetItem(
      label: 'Take Photo',
      onTap: () => takePhoto(),
    ),
    ActionSheetItem(
      label: 'Choose from Library',
      onTap: () => pickFromGallery(),
    ),
    ActionSheetItem(
      label: 'Remove Photo',
      onTap: () => removePhoto(),
      isDestructive: true,
    ),
  ],
)