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.
Arrow
An arrow can be drawn pointing at the child. spacing should be at least the arrow's height to keep it from overlapping
the child.
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.