Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Preview

Code

ShadButton.outline(
  child: const Text('Open'),
  onPressed: () => showShadSheet(
    side: ShadSheetSide.right,
    context: context,
    builder: (context) => const EditProfileSheet(),
  ),
),

final profile = [
  (title: 'Name', value: 'Alexandru'),
  (title: 'Username', value: 'nank1ro'),
];

class EditProfileSheet extends StatelessWidget {
  const EditProfileSheet({super.key, required this.side});

  final ShadSheetSide side;

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return ShadSheet(
      constraints: side == ShadSheetSide.left || side == ShadSheetSide.right
          ? const BoxConstraints(maxWidth: 512)
          : null,
      title: const Text('Edit Profile'),
      description: const Text(
          "Make changes to your profile here. Click save when you're done"),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          spacing: 16,
          children: profile
              .map(
                (p) => Row(
                  children: [
                    Expanded(
                      child: Text(
                        p.title,
                        textAlign: TextAlign.end,
                        style: theme.textTheme.small,
                      ),
                    ),
                    const SizedBox(width: 16),
                    Expanded(
                      flex: 5,
                      child: ShadInput(initialValue: p.value),
                    ),
                  ],
                ),
              )
              .toList(),
        ),
      ),
      actions: const [
        ShadButton(child: Text('Save changes')),
      ],
    );
  }
}

Side

Use the side property to showShadSheet to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Preview

Code

Row(
  mainAxisSize: MainAxisSize.min,
  spacing: 16,
  children: [
    Column(
      spacing: 16,
      mainAxisSize: MainAxisSize.min,
      children: [
        ShadButton.outline(
          width: 100,
          child: const Text('Top'),
          onPressed: () => showShadSheet(
            side: ShadSheetSide.top,
            context: context,
            builder: (context) =>
                const EditProfileSheet(side: ShadSheetSide.top),
          ),
        ),
        ShadButton.outline(
          width: 100,
          child: const Text('Bottom'),
          onPressed: () => showShadSheet(
            side: ShadSheetSide.bottom,
            context: context,
            builder: (context) => const EditProfileSheet(
                side: ShadSheetSide.bottom),
          ),
        ),
      ],
    ),
    Column(
      spacing: 16,
      mainAxisSize: MainAxisSize.min,
      children: [
        ShadButton.outline(
          width: 100,
          child: const Text('Right'),
          onPressed: () => showShadSheet(
            side: ShadSheetSide.right,
            context: context,
            builder: (context) => const EditProfileSheet(
                side: ShadSheetSide.right),
          ),
        ),
        ShadButton.outline(
          width: 100,
          child: const Text('Left'),
          onPressed: () => showShadSheet(
            side: ShadSheetSide.left,
            context: context,
            builder: (context) => const EditProfileSheet(
                side: ShadSheetSide.left),
          ),
        ),
      ],
    ),
  ],
),

// See EditProfileSheet code in the previous code example

Expandable

Set expandable: true to let the user drag the handle (or the sheet’s body edge) to resize the sheet between minSize and maxSize, starting at initialSize. Enable snap with snapSizes to make releases settle on the nearest stop, and a fast flick always goes straight to maxSize or minSize.

Drive the size programmatically with a ShadSheetController (jumpTo, animateTo), and replace the default pill with dragHandle or the side-aware dragHandleBuilder.

Preview

Code

ShadButton.outline(
  child: const Text('Open expandable sheet'),
  onPressed: () => showShadSheet(
    side: ShadSheetSide.bottom,
    context: context,
    builder: (context) => const ShadSheet(
      expandable: true,
      snap: true,
      snapSizes: [0.3, 0.6, 0.9],
      initialSize: 0.3,
      minSize: 0.3,
      maxSize: 0.9,
      title: Text('Expandable Sheet'),
      description: Text('Drag the handle to resize'),
      child: Text('Content here'),
    ),
  ),
)