Persistent Sheet

A persistent sheet is displayed above another widget while still allowing users to interact with the widget below. It is part of FScaffold, which should be preferred in most cases.

API Reference

A closely related widget is a modal sheet which prevents the user from interacting with the rest of the app.

⚠️

All calls to showFPersistentSheet(...) should be made inside widgets that have either FScaffold or FSheets as their ancestor.

class Sheets extends StatefulWidget {
  @override
  State<Sheets> createState() => _State();
}
 
class _State extends State<Sheets> {
  final Map<Layout, FSheetController> _controllers = {};
 
  @override
  Widget build(BuildContext context) {
    VoidCallback onPress(Layout side) => () {
          for (final MapEntry(:key, :value) in _controllers.entries) {
            if (key != side && value.shown) {
              return;
            }
          }
 
          var controller = _controllers[side];
          if (controller == null) {
            controller = _controllers[side] ??= showFPersistentSheet(
              context: context,
              side: Layout.ltr,
              builder: (context, controller) => Form(side: side, controller: controller),
            );
          } else {
            controller.toggle();
          }
        };
 
    return FScaffold( // This can be replaced with FSheets
      content: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          FButton(
            label: const Text('Left'),
            onPress: onPress(Layout.ltr),
          ),
          const SizedBox(height: 5),
          FButton(
            label: const Text('Top'),
            onPress: onPress(Layout.ttb),
          ),
          const SizedBox(height: 5),
          FButton(
            label: const Text('Right'),
            onPress: onPress(Layout.rtl),
          ),
          const SizedBox(height: 5),
          FButton(
            label: const Text('Bottom'),
            onPress: onPress(Layout.btt),
          ),
        ],
      ),
    );
  }
}
 
class Form extends StatelessWidget {
  final Layout side;
  final FSheetController controller;
 
  const Form({required this.side, required this.controller, super.key});
 
  @override
  Widget build(BuildContext context) => Container(
        height: double.infinity,
        width: double.infinity,
        decoration: BoxDecoration(
          color: context.theme.colorScheme.background,
          border: side.vertical
              ? Border.symmetric(horizontal: BorderSide(color: context.theme.colorScheme.border))
              : Border.symmetric(vertical: BorderSide(color: context.theme.colorScheme.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.colorScheme.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.colorScheme.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(
                        label: const Text('Save'),
                        onPress: () => Navigator.of(context).pop(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
 
  @override
  void dispose() {
    for (final controller in _controllers.values) {
      controller.dispose();
    }
    super.dispose();
  }
}

Usage

`showFPersistentSheet(...)`

showFPersistentSheet(
  context: context,
  side: Layout.ltr,
  useRootNavigator: true,
  useSafeArea: false,
  keepAliveOffstage: true,
  mainAxisMaxRatio: null,
  constraints: const BoxConstraints(maxWidth: 450, maxHeight: 450),
  draggable: true,
  builder: (context) => const Placeholder(),
);

Examples

With `KeepAliveOffstage`

class Sheets extends StatefulWidget {
  @override
  State<Sheets> createState() => _State();
}
 
class _State extends State<Sheets> {
  final Map<Layout, FSheetController> _controllers = {};
 
  @override
  Widget build(BuildContext context) {
    VoidCallback onPress(Layout side) => () {
          for (final MapEntry(:key, :value) in _controllers.entries) {
            if (key != side && value.shown) {
              return;
            }
          }
 
          var controller = _controllers[side];
          if (controller == null) {
            controller = _controllers[side] ??= showFPersistentSheet(
              context: context,
              side: Layout.ltr,
              keepAliveOffstage: true,
              builder: (context, controller) => Form(side: side, controller: controller),
            );
          } else {
            controller.toggle();
          }
        };
 
    return FScaffold( // This can be replaced with FSheets
      content: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          FButton(
            label: const Text('Left'),
            onPress: onPress(Layout.ltr),
          ),
          const SizedBox(height: 5),
          FButton(
            label: const Text('Top'),
            onPress: onPress(Layout.ttb),
          ),
          const SizedBox(height: 5),
          FButton(
            label: const Text('Right'),
            onPress: onPress(Layout.rtl),
          ),
          const SizedBox(height: 5),
          FButton(
            label: const Text('Bottom'),
            onPress: onPress(Layout.btt),
          ),
        ],
      ),
    );
  }
}
 
class Form extends StatelessWidget {
  final Layout side;
  final FSheetController controller;
 
  const Form({required this.side, required this.controller, super.key});
 
  @override
  Widget build(BuildContext context) => Container(
        height: double.infinity,
        width: double.infinity,
        decoration: BoxDecoration(
          color: context.theme.colorScheme.background,
          border: side.vertical
              ? Border.symmetric(horizontal: BorderSide(color: context.theme.colorScheme.border))
              : Border.symmetric(vertical: BorderSide(color: context.theme.colorScheme.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.colorScheme.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.colorScheme.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(
                        label: const Text('Save'),
                        onPress: () => Navigator.of(context).pop(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
 
  @override
  void dispose() {
    for (final controller in _controllers.values) {
      controller.dispose();
    }
    super.dispose();
  }
}

With `DraggableScrollableSheet`

Sheet Popover