frontend/appflowy_flutter/packages/appflowy_popover/README.md
A Popover can be used to display some content on top of another.
It can be used to display a dropdown menu.
A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal. A nonmodal popover is dismissed by tapping another part of the screen or a button on the popover. A modal popover is dismissed by tapping a Cancel or other button on the popover.
Source: Human Interface Guidelines.
Popover(
// Define how to trigger the popover
triggerActions: PopoverTriggerActionFlags.click,
child: TextButton(child: Text("Popover"), onPressed: () {}),
// Define the direction of the popover
direction: PopoverDirection.bottomWithLeftAligned,
popupBuilder(BuildContext context) {
return PopoverMenu();
},
);
Sometimes, if you want to trigger the popover manually, you can use a PopoverController.
class MyWidgetState extends State<GridDateCell> {
late PopoverController _popover;
@override
void initState() {
_popover = PopoverController();
super.initState();
}
// triggered by another widget
_onClick() {
_popover.show();
}
@override
Widget build(BuildContext context) {
return Popover(
controller: _popover,
...
)
}
}
The popover has a mechanism to make sure there are only one popover is shown in a group of popovers.
It's called PopoverMutex.
If you pass the same mutex object to the popovers, there will be only one popover is triggered.
class MyWidgetState extends State<GridDateCell> {
final _popoverMutex = PopoverMutex();
@override
Widget build(BuildContext context) {
return Row(
children: [
Popover(
mutex: _popoverMutex,
...
),
Popover(
mutex: _popoverMutex,
...
),
Popover(
mutex: _popoverMutex,
...
),
]
)
}
}
| Param | Description | Type |
|---|---|---|
| offset | The offset between the popover and the child | Offset |
| popupBuilder | The function used to build the popover | Widget Function(BuildContext context) |
| triggerActions | Define the actions about how to trigger the popover | int |
| mutex | If multiple popovers are exclusive, pass the same mutex to them. | PopoverMutex |
| direction | The direction where the popover should be placed | PopoverDirection |
| onClose | The callback will be called after the popover is closed | void Function() |
| child | The child to trigger the popover | Widget |