Foundation
Overlay
A low-level overlay primitive that composites content relative to a child widget.
This widget is typically used to create other high-level widgets. Use:
- FPortal to anchor at a child widget's edges (e.g. a dropdown below a button).
- FPointPortal to anchor at a coordinate inside a child (e.g. a context menu at the cursor).
1class OverlayExample extends StatefulWidget {2 @override3 State<OverlayExample> createState() => _State();4}56class _State extends State<OverlayExample> {7 @override8 Widget build(BuildContext context) => FOverlay(9 overlay: [10 Positioned(11 top: -50,12 left: 0,13 child: Container(14 padding: const .symmetric(horizontal: 12, vertical: 8),15 decoration: BoxDecoration(16 color: context.theme.colors.background,17 border: .all(color: context.theme.colors.border),18 borderRadius: .circular(4),19 ),20 child: Text(21 'Overlay content',22 style: context.theme.typography.body.sm,23 ),24 ),25 ),26 ],27 builder: (context, controller, _) => FButton(28 variant: .outline,29 size: .sm,30 mainAxisSize: .min,31 onPress: controller.toggle,32 child: const Text('Toggle Overlay'),33 ),34 );35}36Usage
FOverlay(...)
1FOverlay(2 overlay: const [Positioned(top: 42, left: 0, child: Text('Overlay content'))],3 overlayBuilder: (context, controller, childRenderBox, overlay) => overlay,4 builder: (context, controller, child) => child!,5 child: const Text('Child'),6)