Overlay
CLI
To generate a specific style for customization:
dart run forui style create popoverUsage
FPopover(...)
1FPopover(2 style: const .delta(popoverPadding: .value(.all(5))),3 popoverClipBehavior: .none,4 popoverBuilder: (context, controller) =>5 const Padding(padding: .all(8), child: Text('Popover content')),6 builder: (context, controller, child) => child!,7 child: FButton(onPress: () {}, child: const Text('Show Popover')),8)Examples
Nested Popover
When placing widgets that use popovers internally, e.g. FSelect inside an FPopover, the outer popover will
close when interacting with the inner widget's dropdown. This happens because the inner dropdown is rendered in a
separate overlay layer, and tapping it is considered "outside" the outer popover.
To prevent this, make both widgets share the same groupId.
Horizontal Alignment
You can change how the popover is aligned to the button.
Tapping Outside Does Not Close Popover
Blurred Barrier
Flip along Axis
The popover can be flipped along the overflowing axis to stay within the viewport boundaries.
Slide along Axis
The popover can be slid along the overflowing axis to stay within the viewport boundaries.
Allow Overflow
The popover is not shifted to stay within the viewport boundaries, even if it overflows.