{"id":13551769,"url":"https://github.com/rasitayaz/flutter-pie-menu","last_synced_at":"2025-04-09T21:17:07.956Z","repository":{"id":39851623,"uuid":"419820960","full_name":"rasitayaz/flutter-pie-menu","owner":"rasitayaz","description":"A Flutter package providing a highly customizable circular/radial context menu","archived":false,"fork":false,"pushed_at":"2024-10-14T20:22:12.000Z","size":389890,"stargazers_count":37,"open_issues_count":4,"forks_count":20,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T21:17:01.053Z","etag":null,"topics":["context-menu","dart","flutter","flutter-package","flutter-widget","pie-menu","radial-menu","widget"],"latest_commit_sha":null,"homepage":"https://rasitayaz.github.io/flutter-pie-menu/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rasitayaz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://buymeacoffee.com/rasitayaz"]}},"created_at":"2021-10-21T17:40:52.000Z","updated_at":"2025-03-11T02:22:39.000Z","dependencies_parsed_at":"2024-01-14T16:08:12.133Z","dependency_job_id":"e2e25734-d5d3-4e74-bfb3-aea786a679e1","html_url":"https://github.com/rasitayaz/flutter-pie-menu","commit_stats":{"total_commits":287,"total_committers":7,"mean_commits":41.0,"dds":0.2857142857142857,"last_synced_commit":"f3f02964203f7c4fec8fe26ca32e1abd0a61a79d"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasitayaz%2Fflutter-pie-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasitayaz%2Fflutter-pie-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasitayaz%2Fflutter-pie-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasitayaz%2Fflutter-pie-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rasitayaz","download_url":"https://codeload.github.com/rasitayaz/flutter-pie-menu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111973,"owners_count":21049578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-menu","dart","flutter","flutter-package","flutter-widget","pie-menu","radial-menu","widget"],"created_at":"2024-08-01T12:01:53.428Z","updated_at":"2025-04-09T21:17:07.924Z","avatar_url":"https://github.com/rasitayaz.png","language":"Dart","funding_links":["https://buymeacoffee.com/rasitayaz"],"categories":["Dart"],"sub_categories":[],"readme":"# Flutter Pie Menu 🥧\n\n[![pub](https://badges.genua.fr/pub/v/pie_menu)](https://pub.dev/packages/pie_menu)\n[![pub likes](https://badges.genua.fr/pub/likes/pie_menu)](https://pub.dev/packages/pie_menu)\n[![web](https://img.shields.io/badge/live-web\u0026nbsp;demo-white.svg)](https://rasitayaz.github.io/flutter-pie-menu)\n[![apk](https://img.shields.io/badge/apk-android\u0026nbsp;demo-teal.svg)](https://github.com/rasitayaz/flutter-pie-menu/raw/showcase/demo/android.zip)\n[![app](https://img.shields.io/badge/app-macos\u0026nbsp;demo-blueviolet)](https://github.com/rasitayaz/flutter-pie-menu/raw/showcase/demo/macos.zip)\n[![github](https://img.shields.io/badge/github-rasitayaz-red)](https://github.com/rasitayaz)\n[![buy me a coffee](https://img.shields.io/badge/buy\u0026nbsp;me\u0026nbsp;a\u0026nbsp;coffee-donate-gold)](https://buymeacoffee.com/rasitayaz)\n\nA Flutter package providing a highly customizable circular/radial context menu, similar to Pinterest's.\n\n[Click here to try Flutter Pie Menu online!](https://rasitayaz.github.io/flutter-pie-menu)\n\n| ![](https://raw.githubusercontent.com/rasitayaz/flutter-pie-menu/showcase/preview/screenshot-1.jpg) | ![](https://raw.githubusercontent.com/rasitayaz/flutter-pie-menu/showcase/preview/example-1.gif) | ![](https://raw.githubusercontent.com/rasitayaz/flutter-pie-menu/showcase/preview/example-2.gif) |\n| :-------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: |\n\n## Table of Contents\n\n- [Flutter Pie Menu 🥧](#flutter-pie-menu-)\n  - [Table of Contents](#table-of-contents)\n  - [Usage](#usage)\n  - [Customization](#customization)\n    - [Button themes](#button-themes)\n    - [Custom button widgets](#custom-button-widgets)\n    - [Display angle of menu buttons](#display-angle-of-menu-buttons)\n    - [Specific menu position](#specific-menu-position)\n    - [Tap, long press or right click to open the menu](#tap-long-press-or-right-click-to-open-the-menu)\n  - [Controllers and callbacks](#controllers-and-callbacks)\n  - [Contributing](#contributing)\n  - [Donation](#donation)\n\n## Usage\n\nWrap the widget that should respond to gestures with the `PieMenu` widget, and provide the menu with an array of `PieAction`s to display as circular buttons.\n\n```dart\nPieMenu(\n  onPressed: () =\u003e print('pressed'),\n  actions: [\n    PieAction(\n      tooltip: const Text('like'),\n      onSelect: () =\u003e print('liked'),\n      child: const Icon(Icons.favorite), // Can be any widget\n    ),\n  ],\n  child: ChildWidget(),\n),\n```\n\n\u003e 💡 Don't forget that you can only use `PieMenu` as a descendant of a `PieCanvas` widget.\n\nWrap your page, or any other desired widget for drawing the menu and the background overlay, with `PieCanvas` widget.\n\nFor instance, if you want the menu to be displayed at the forefront, wrap your `Scaffold` with a `PieCanvas` like following:\n\n```dart\nPieCanvas(\n  child: Scaffold(\n    body: YourScaffoldBody(\n      ...\n        PieMenu(),\n      ...\n    ),\n  ),\n),\n```\n\n\u003e 💡 You can utilize the `onPressed` callback defined in `PieMenu` to manage tap events without the need for an extra widget such as `GestureDetector`.\n\n## Customization\n\nYou can customize the appearance and behavior of menus using `PieTheme`.\n\nUsing the `theme` attribute of `PieCanvas` widget, you can specify a theme for all the descendant `PieMenu` widgets.\n\n```dart\nPieCanvas(\n  theme: PieTheme(),\n  ...\n    PieMenu(), // Uses the canvas theme\n  ...\n    PieMenu(), // Uses the canvas theme\n  ...\n),\n```\n\nBut if you want to specify menu specific themes, you can also use the `theme` attribute of `PieMenu` widget.\n\n```dart\nPieMenu(\n  theme: PieTheme(), // Overrides the canvas theme\n),\n```\n\nIt is also possible to copy the canvas theme with additional parameters, but make sure you are accessing it with the right `context`.\n\n```dart\nPieMenu(\n  theme: PieTheme.of(context).copyWith(\n    ...\n  ),\n),\n```\n\n### Button themes\n\nButtons' 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.\n\n```dart\nPieTheme(\n  buttonTheme: PieButtonTheme(),\n  buttonThemeHovered: PieButtonTheme(),\n),\n```\n\nYou can even give the buttons custom styles using `decoration` property of `PieButtonTheme`.\n\n```dart\nPieButtonTheme(\n  decoration: BoxDecoration(),\n),\n```\n\n### Custom button widgets\n\nIf 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 as a parameter.\n\n```dart\nPieAction.builder(\n  tooltip: const Text('like'),\n  onSelect: () =\u003e print('liked'),\n  builder: (hovered) {\n    return Text(\n      '\u003c3',\n      style: TextStyle(\n        color: hovered ? Colors.green : Colors.red,\n      ),\n    );\n  },\n),\n```\n\n### Display angle of menu buttons\n\nIf you don't want the dynamic angle calculation and have the menu appear at a fixed angle, set `customAngle` and `customAngleAnchor` attributes of `PieTheme`.\n\n```dart\nPieTheme(\n  customAngle: 90, // In degrees\n  customAngleAnchor: PieAnchor.center, // start, center, end\n),\n```\n\nYou can also use `customAngleDiff` or `spacing` to adjust the angle between buttons, and `angleOffset` to rotate the menu.\n\n### Specific menu position\n\nUse `menuAlignment` attribute of `PieTheme` to make the menu appear at a specific position regardless of the pressed point. Combine it with `menuDisplacement` to fine-tune the position.\n\n```dart\nPieTheme(\n  menuAlignment: Alignment.center,\n  menuDisplacement: Offset(0, 0),\n),\n```\n\n### Tap, long press or right click to open the menu\n\nSet `delayDuration` of your theme to `Duration.zero` to open the menu instantly on tap.\n\n```dart\nPieTheme(\n  delayDuration: Duration.zero,\n),\n```\n\nUsing `rightClickShowsMenu` and `leftClickShowsMenu` attributes of `PieTheme`, you can customize the mouse button behavior.\n\n```dart\nPieTheme(\n  rightClickShowsMenu: true,\n  leftClickShowsMenu: false,\n),\n```\n\n## Controllers and callbacks\n\nTo open, close or toggle a menu programmatically, assign a `PieMenuController` to it.\n\n```dart\n// Create a controller inside a stateful widget.\nfinal _pieMenuController = PieMenuController();\n\n// Assign the controller to a PieMenu.\nPieMenu(\n  controller: _pieMenuController,\n  ...\n),\n\n// Control the menu using the controller.\n_pieMenuController.open(\n  menuAlignment: Alignment.center,\n);\n```\n\nIf you need to do something when the menu is toggled, use `onToggle` callback of `PieMenu`, or `onMenuToggle` callback of `PieCanvas`.\n\n```dart\nPieMenu(\n  onToggle: (menuOpen) =\u003e print('Menu ${menuOpen ? 'opened' : 'closed'}'),\n  ...\n),\n\nPieCanvas(\n  onMenuToggle: (menuOpen) =\u003e print('A menu ${menuOpen ? 'opened' : 'closed'}'),\n  ...\n),\n```\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n[![github](https://img.shields.io/badge/github-flutter%20pie%20menu-white)](https://github.com/rasitayaz/flutter-pie-menu)\n\n## Donation\n\nIf you find this package useful, please consider donating to support the project.\n\n[![buy me a coffee](https://img.shields.io/badge/buy\u0026nbsp;me\u0026nbsp;a\u0026nbsp;coffee-donate-gold)](https://buymeacoffee.com/rasitayaz)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasitayaz%2Fflutter-pie-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frasitayaz%2Fflutter-pie-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasitayaz%2Fflutter-pie-menu/lists"}