A Flutter package that provides a customizable circular/radial context menu similar to Pinterest's
![]() |
![]() |
![]() |
---|
Wrap the widget that will react to gestures with PieMenu
widget, and give the menu a list of PieAction
s to display as menu buttons.
PieMenu(
onTap: () => print('tap'),
actions: [
PieAction(
tooltip: 'like',
onSelect: () => print('liked'),
child: const Icon(Icons.favorite), // Not necessarily an icon widget
),
],
child: YourWidget(),
),
๐ก Note that you can only use
PieMenu
in the sub-hierarchy of aPieCanvas
widget.
Wrap your page (or any other widget you want to draw pie buttons and background overlay on) with PieCanvas
widget.
For example, if you want the menu to be displayed at the forefront, you can wrap your Scaffold
with a PieCanvas
like following:
PieCanvas(
child: Scaffold(
body: YourScaffoldBody(
...
PieMenu(),
...
),
),
),
โ ๏ธ If you want to usePieMenu
inside a scrollable view like aListView
, or your widget is already interactive (e.g. it is clickable), you may need to pay attention to this section.
PieCanvas
and PieMenu
widgets have functional callbacks named onMenuToggle
and onToggle
respectively, which are triggered when PieMenu
visibility changed. Using these callbacks, you can prevent your scrollable or interactive widget's default behavior in order to give the control to PieMenu
.
๐ก You can use
onTap
callback defined inPieMenu
to handle tap events without using an additional widget likeGestureDetector
.
๐ก As for the scrollables, there is an issue with Flutter framework related to
ScrollConfiguration
, so automatically disabling scroll may not be an option until this issue is resolved.
Store the active
parameter of the callbacks in your state.
bool _menuActive = false;
@override
Widget build(BuildContext context) {
return PieCanvas(
onMenuToggle: (active) {
setState(() => _menuActive = active);
},
...
);
}
For example, you can decide whether scrolling should be enabled or not using this variable.
ListView(
// Disable scrolling if a PieMenu is active
physics: _menuActive
? NeverScrollableScrollPhysics()
: null, // Uses the default physics
...
);
You can customize the appearance and behavior of menus using PieTheme
.
Using the theme
attribute of PieCanvas
widget, you can specify a theme for all the PieMenu
s that inherit the canvas.
PieCanvas(
theme: PieTheme(),
...
PieMenu(), // Uses the canvas theme
...
PieMenu(), // Uses the canvas theme
...
),
But if you want to specify menu specific themes, you can also use the theme
attribute of PieMenu
widget.
PieMenu(
theme: PieTheme(), // Overrides the canvas theme
),
It is also possible to copy the canvas theme with custom parameters, but make sure you are accessing it with the right context
.
PieMenu(
theme: PieTheme.of(context).copyWith(
...
),
),
Buttons' background and icon colors are defined by theme's buttonTheme
and buttonThemeHovered
. You can create a custom PieButtonTheme
instances for your canvas and menu themes.
PieTheme(
buttonTheme: PieButtonTheme(),
buttonThemeHovered: PieButtonTheme(),
),
If you wish to use custom widgets inside buttons instead of just icons, it is recommended to use PieAction.builder()
with a builder
which provides whether the action is hovered or not.
PieAction.builder(
tooltip: 'like',
onSelect: () => print('liked'),
builder: (hovered) {
return Text(
'<3',
style: TextStyle(
color: hovered ? Colors.green : Colors.red,
),
);
},
),
If you wish to show the menu as soon as the child is pressed, you may set delayDuration
of your theme to Duration.zero
.
PieTheme(
delayDuration: Duration.zero,
),