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. For higher-level positioning with anchor alignment and overflow handling, use FPortal.
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('Overlay content', style: context.theme.typography.sm),21 ),22 ),23 ],24 builder: (context, controller, _) => FButton(25 variant: .outline,26 size: .sm,27 mainAxisSize: .min,28 onPress: controller.toggle,29 child: const Text('Toggle Overlay'),30 ),31 );32}33Usage
FOverlay(...)
1FOverlay(2 controller: null,3 overlay: const [Positioned(top: 42, left: 0, child: Text('Overlay content'))],4 overlayBuilder: (context, controller, childRenderBox, overlay) => overlay,5 builder: (context, controller, child) => child!,6 child: const Text('Child'),7)