Overlay

Popover Menu

A popover menu displays a menu in a portal aligned to a child.

API Reference
1@override
2Widget build(BuildContext _) => FHeader(
3 title: const Text('Edit Notes'),
4 suffixes: [
5 FPopoverMenu(
6 autofocus: true,
7 menuAnchor: .topRight,
8 childAnchor: .bottomRight,
9 menu: [
10 .group(
11 children: [
12 .item(
13 prefix: const Icon(FIcons.user),
14 title: const Text('Personalization'),
15 onPress: () {},
16 ),
17 .item(
18 prefix: const Icon(FIcons.paperclip),
19 title: const Text('Add attachments'),
20 onPress: () {},
21 ),
22 .item(
23 prefix: const Icon(FIcons.qrCode),
24 title: const Text('Scan Document'),
25 onPress: () {},
26 ),
27 ],
28 ),
29 .group(
30 children: [
31 .item(
32 prefix: const Icon(FIcons.list),
33 title: const Text('List View'),
34 onPress: () {},
35 ),
36 .item(
37 prefix: const Icon(FIcons.layoutGrid),
38 title: const Text('Grid View'),
39 onPress: () {},
40 ),
41 ],
42 ),
43 ],
44 builder: (_, controller, _) => FHeaderAction(
45 icon: const Icon(FIcons.ellipsis),
46 onPress: controller.toggle,
47 ),
48 ),
49 ],
50);
51

CLI

To generate and customize this style:

dart run forui style create popover-menu

Usage

FPopoverMenu(...)

1FPopoverMenu(
2 style: const .delta(maxWidth: 250),
3 divider: .full,
4 menu: [
5 .group(
6 children: [
7 .item(title: const Text('Edit'), onPress: () {}),
8 .item(title: const Text('Delete'), onPress: () {}),
9 ],
10 ),
11 ],
12 menuBuilder: (context, controller, menu) => menu!,
13 builder: (context, controller, child) => child!,
14 child: FButton(onPress: () {}, child: const Text('Menu')),
15)

FPopoverMenu.tiles(...)

1FPopoverMenu.tiles(
2 style: const .delta(maxWidth: 250),
3 divider: .full,
4 menu: [
5 .group(
6 children: [
7 .tile(title: const Text('Edit'), onPress: () {}),
8 .tile(title: const Text('Delete'), onPress: () {}),
9 ],
10 ),
11 ],
12 menuBuilder: (context, controller, menu) => menu!,
13 builder: (context, controller, child) => child!,
14 child: FButton(onPress: () {}, child: const Text('Menu')),
15)

Examples

Tiles

1@override
2Widget build(BuildContext _) => FHeader(
3 title: const Text('Edit Notes'),
4 suffixes: [
5 FPopoverMenu.tiles(
6 autofocus: true,
7 menuAnchor: .topRight,
8 childAnchor: .bottomRight,
9 menu: [
10 .group(
11 children: [
12 .tile(
13 prefix: const Icon(FIcons.user),
14 title: const Text('Personalization'),
15 onPress: () {},
16 ),
17 .tile(
18 prefix: const Icon(FIcons.paperclip),
19 title: const Text('Add attachments'),
20 onPress: () {},
21 ),
22 .tile(
23 prefix: const Icon(FIcons.qrCode),
24 title: const Text('Scan Document'),
25 onPress: () {},
26 ),
27 ],
28 ),
29 .group(
30 children: [
31 .tile(
32 prefix: const Icon(FIcons.list),
33 title: const Text('List View'),
34 onPress: () {},
35 ),
36 .tile(
37 prefix: const Icon(FIcons.layoutGrid),
38 title: const Text('Grid View'),
39 onPress: () {},
40 ),
41 ],
42 ),
43 ],
44 builder: (_, controller, _) => FHeaderAction(
45 icon: const Icon(FIcons.ellipsis),
46 onPress: controller.toggle,
47 ),
48 ),
49 ],
50);
51

Persistent Sheet

A persistent sheet is displayed above another widget while still allowing users to interact with the widget below.

Popover

A popover displays rich content in a portal that is aligned to a child.

On this page

CLI
Usage
FPopoverMenu(...)
FPopoverMenu.tiles(...)
Examples
Tiles