pie_menu 1.1.0

A Flutter package that provides a customizable circular/radial context menu

Flutter Pie Menu 🥧

A Flutter package that provides a customizable circular/radial context menu similar to Pinterest's

Usage

Wrap the widget that will react to gestures with PieMenu widget, and give the menu a list of PieActions to display as menu buttons.

PieMenu(
  onTap: () => print('Tap'),
  actions: [
    PieAction(
      tooltip: 'Like',
      onSelect: () => print('Like action selected.'),
      child: const Icon(Icons.favorite), // Not necessarily an icon widget
    ),
  ],
  child: YourWidget(),
),

Note that you can only use PieMenu in the sub-hierarchy of a PieCanvas widget.

Wrap the parent widget of your page (or any other widget you want to draw pie buttons 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(),
      ...
    ),
  ),
),

Using with Scrollable and Interactive Widgets

⚠️ If you want to use PieMenu inside a scrollable view like a ListView, 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 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.

If you can think of a better implementation to handle this automatically, feel free to create a new issue on this package's repository and express your opinion.

Using the visible parameter of the callbacks, store a bool variable in your state.

bool _menuVisible = false;

@override
Widget build(BuildContext context) {
  return PieCanvas(
    onMenuToggle: (visible) {
      setState(() => _menuVisible = visible);
    },
    ...
  );
}

Using this variable, you can decide whether scrolling should be enabled or not.

ListView(
  // Disable scrolling if a 'PieMenu' is visible
  physics: _menuVisible
      ? NeverScrollableScrollPhysics()
      : ScrollPhysics(), // Or your default scroll physics
  ...
);

Customization

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 PieMenus 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
),

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(),
),

Display the menu on tap instead of long press

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,
),