Sheet

A modal sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. It navigates to a new page each time.

API Reference

A closely related widget is a persistent sheet, which shows information that supplements the primary content of the app without preventing the user from interacting with the app.

Preview

Code


class ModalSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Column(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      FButton(
        child: const Text('Left'),
        onPress: () => showFSheet(
          context: context,
          side: FLayout.ltr,
          builder: (context) => const Form(side: FLayout.ltr),
        ),
      ),
      const SizedBox(height: 5),
      FButton(
        child: const Text('Top'),
        onPress: () => showFSheet(
          context: context,
          side: FLayout.ttb,
          builder: (context) => const Form(side: FLayout.ttb),
        ),
      ),
      const SizedBox(height: 5),
      FButton(
        child: const Text('Right'),
        onPress: () => showFSheet(
          context: context,
          side: FLayout.rtl,
          builder: (context) => const Form(side: FLayout.rtl),
        ),
      ),
      const SizedBox(height: 5),
      FButton(
        child: const Text('Bottom'),
        onPress: () => showFSheet(
          context: context,
          side: FLayout.btt,
          builder: (context) => const Form(side: FLayout.btt),
        ),
      ),
    ],
  );
}
 
class Form extends StatelessWidget {
  final FLayout side;
 
  const Form({required this.side, super.key});
 
  @override
  Widget build(BuildContext context) => Container(
    height: double.infinity,
    width: double.infinity,
    decoration: BoxDecoration(
      color: context.theme.colors.background,
      border: side.vertical
          ? Border.symmetric(horizontal: BorderSide(color: context.theme.colors.border))
          : Border.symmetric(vertical: BorderSide(color: context.theme.colors.border)),
    ),
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 8.0),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Account',
              style: context.theme.typography.xl2.copyWith(
                fontWeight: FontWeight.w600,
                color: context.theme.colors.foreground,
                height: 1.5,
              ),
            ),
            Text(
              'Make changes to your account here. Click save when you are done.',
              style: context.theme.typography.sm.copyWith(
                color: context.theme.colors.mutedForeground,
              ),
            ),
            const SizedBox(height: 8),
            SizedBox(
              width: 450,
              child: Column(
                children: [
                  const FTextField(
                    label: Text('Name'),
                    hint: 'John Renalo',
                  ),
                  const SizedBox(height: 10),
                  const FTextField(
                    label: Text('Email'),
                    hint: '[email protected]',
                  ),
                  const SizedBox(height: 16),
                  FButton(
                    onPress: () => Navigator.of(context).pop(),
                    child: const Text('Save'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

CLI

To generate and customize this style:


dart run forui style create sheet

Usage

`showFSheet(...)`


showFSheet(
  context: context,
  style: FSheetStyle(...),
  side: FLayout.ltr,
  useRootNavigator: true,
  useSafeArea: false,
  mainAxisMaxRatio: null,
  constraints: const BoxConstraints(maxWidth: 450, maxHeight: 450),
  barrierDismissible: true,
  draggable: true,
  builder: (context) => const Placeholder(),
);

Sheet

Preview

Code

CLI

Usage

`showFSheet(...)`

Examples

With `DraggableScrollableSheet`

Preview

Code

Sheet

Preview

Code

CLI

Usage

showFSheet(...)

Examples

With DraggableScrollableSheet

Preview

Code

`showFSheet(...)`

With `DraggableScrollableSheet`