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.
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.
Preview
Code
class Sheets extends StatefulWidget {
@override
State<Sheets> createState() => _State();
}
class _State extends State<Sheets> {
final Map<FLayout, FPersistentSheetController> _controllers = {};
@override
Widget build(BuildContext context) {
VoidCallback onPress(FLayout 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: FLayout.ltr,
builder: (context, controller) => Form(side: side),
);
} else {
controller.toggle();
}
};
return FScaffold( // This can be replaced with FSheets
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
spacing: 5,
children: [
FButton(
onPress: onPress(FLayout.ltr),
child: const Text('Left'),
),
FButton(
onPress: onPress(FLayout.ttb),
child: const Text('Top'),
),
FButton(
onPress: onPress(FLayout.rtl),
child: const Text('Right'),
),
FButton(
onPress: onPress(FLayout.btt),
child: const Text('Bottom'),
),
],
),
);
}
@override
void dispose() {
for (final controller in _controllers.values) {
controller.dispose();
}
super.dispose();
}
}
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
showFPersistentSheet(...)
showFPersistentSheet(
context: context,
style: FSheetStyle(...),
side: FLayout.ltr,
useSafeArea: false,
keepAliveOffstage: true,
mainAxisMaxRatio: null,
constraints: const BoxConstraints(maxWidth: 450, maxHeight: 450),
draggable: true,
builder: (context, controller) => const Placeholder(),
);Examples
With KeepAliveOffstage
Preview
Code
class Sheets extends StatefulWidget {
@override
State<Sheets> createState() => _State();
}
class _State extends State<Sheets> {
final Map<FLayout, FPersistentSheetController> _controllers = {};
@override
Widget build(BuildContext context) {
VoidCallback onPress(FLayout 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: FLayout.ltr,
keepAliveOffstage: true,
builder: (context, controller) => Form(side: side),
);
} else {
controller.toggle();
}
};
return FScaffold( // This can be replaced with FSheets
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
spacing: 5,
children: [
FButton(
onPress: onPress(FLayout.ltr),
child: const Text('Left'),
),
FButton(
onPress: onPress(FLayout.ttb),
child: const Text('Top'),
),
FButton(
onPress: onPress(FLayout.rtl),
child: const Text('Right'),
),
FButton(
onPress: onPress(FLayout.btt),
child: const Text('Bottom'),
),
],
),
);
}
@override
void dispose() {
for (final controller in _controllers.values) {
controller.dispose();
}
super.dispose();
}
}
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'),
),
],
),
),
],
),
),
),
);
}With DraggableScrollableSheet
Preview
Code
class DraggableSheets extends StatefulWidget {
@override
State<DraggableSheets> createState() => _State();
}
class _State extends State<DraggableSheets> {
FPersistentSheetController? controller;
@override
Widget build(BuildContext context) => FScaffold(
child: FButton(
child: const Text('Click me'),
onPress: () {
if (controller != null) {
controller!.toggle();
return;
}
controller = showFPersistentSheet(
context: context,
side: FLayout.btt,
mainAxisMaxRatio: null,
builder: (context, _) => DraggableScrollableSheet(
expand: false,
builder: (context, controller) => ScrollConfiguration(
// This is required to enable dragging on desktop.
// See https://github.com/flutter/flutter/issues/101903 for more information.
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
PointerDeviceKind.trackpad,
},
),
child: FTileGroup.builder(
count: 25,
scrollController: controller,
tileBuilder: (context, index) => FTile(title: Text('Tile $index')),
),
),
),
);
},
),
);
@override
void dispose() {
controller?.dispose();
super.dispose();
}
}Last updated on