{"id":26485544,"url":"https://github.com/nank1ro/disable_web_context_menu","last_synced_at":"2025-09-01T09:39:24.703Z","repository":{"id":268873980,"uuid":"905715614","full_name":"nank1ro/disable_web_context_menu","owner":"nank1ro","description":"Disables the native web context menu for a given widget","archived":false,"fork":false,"pushed_at":"2024-12-31T11:54:23.000Z","size":358,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-29T23:57:45.493Z","etag":null,"topics":["context","disable","flutter","menu","web"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/disable_web_context_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/nank1ro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2024-12-19T11:33:27.000Z","updated_at":"2025-07-26T13:41:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"06d2ef14-e673-45a7-8224-3a91f17a8fd4","html_url":"https://github.com/nank1ro/disable_web_context_menu","commit_stats":null,"previous_names":["nank1ro/disable_web_context_menu"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nank1ro/disable_web_context_menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nank1ro%2Fdisable_web_context_menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nank1ro%2Fdisable_web_context_menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nank1ro%2Fdisable_web_context_menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nank1ro%2Fdisable_web_context_menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nank1ro","download_url":"https://codeload.github.com/nank1ro/disable_web_context_menu/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nank1ro%2Fdisable_web_context_menu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273100846,"owners_count":25045700,"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","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","disable","flutter","menu","web"],"created_at":"2025-03-20T05:58:24.178Z","updated_at":"2025-09-01T09:39:24.666Z","avatar_url":"https://github.com/nank1ro.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DisableWebContextMenu\n\nA Flutter widget that disables the native context menu on web for the child widget.\n\nRead the blog post about it [here](https://mariuti.com/posts/flutter-web-disable-browser-context-menu-for-specific-widget/)\n\n**You can test it live [here](https://disable-web-context-menu.pages.dev)**\n\n## Problem\n\nBy default on Flutter Web when you right click the native web context menu is shown.\nWhat if you want to disable it to show a custom Flutter widget instead?\n\n\u003cimg src=\"https://raw.githubusercontent.com/nank1ro/disable_web_context_menu/main/assets/problem.png\" height=\"400\"\u003e\n\nAs you can see when you try to display the custom flutter widget, the native web context menu is shown together. Play close attention to the red circle, it's the flutter context menu.\n\nFlutter provides a solution you can [check here](https://api.flutter.dev/flutter/widgets/ContextMenuController-class.html) which uses:\n```dart\n// On web, disable the browser's context menu since this example uses a custom\n// Flutter-rendered context menu.\nif (kIsWeb) {\n  BrowserContextMenu.disableContextMenu();\n}\n```\n\nThe downside of this solution is that the native context menu is disabled for all the app and all the widgets.\nWhat if you want to disable it only for specific widgets?\n\n## Solution\n\nThis package introduces a widget called `DisableWebContextMenu` that disables the native web context menu for a specific widget only.\n\nYou can safely import and use it in all the platforms, because on non-web platforms this package does nothing.\n\n\u003cimg src=\"https://raw.githubusercontent.com/nank1ro/disable_web_context_menu/main/assets/solution.png\" height=\"400\"\u003e\n\n\u003e TIP: If you right click outside the container, the native web context menu will be shown.\n\n## Example Usage\n\n```dart\nclass MyHomePage extends StatelessWidget {\n  const MyHomePage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Center(\n        child: TapRegion(\n          onTapOutside: (_) {\n            // When tapping outside the container, hide the context menu.\n            ContextMenuController.removeAny();\n          },\n          child: DisableWebContextMenu(\n            child: _ContextMenuRegion(\n              contextMenuBuilder: (BuildContext context, Offset offset) {\n                // The custom context menu will look like the default context menu\n                // on the current platform with a single 'Print' button.\n                return AdaptiveTextSelectionToolbar.buttonItems(\n                  anchors: TextSelectionToolbarAnchors(\n                    primaryAnchor: offset,\n                  ),\n                  buttonItems: \u003cContextMenuButtonItem\u003e[\n                    ContextMenuButtonItem(\n                      onPressed: () {\n                        ContextMenuController.removeAny();\n                      },\n                      label: 'Print',\n                    ),\n                  ],\n                );\n              },\n              child: Container(\n                width: 200,\n                height: 200,\n                alignment: Alignment.center,\n                decoration: BoxDecoration(\n                  border: Border.all(),\n                  borderRadius: BorderRadius.all(Radius.circular(16)),\n                ),\n                child: Text(\n                  'Right click to show the custom context menu',\n                  textAlign: TextAlign.center,\n                ),\n              ),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n\n// This example was taken from the [official documentation](https://api.flutter.dev/flutter/widgets/ContextMenuController-class.html)\n// A builder that includes an Offset to draw the context menu at.\ntypedef ContextMenuBuilder = Widget Function(\n    BuildContext context, Offset offset);\n\n/// Shows and hides the context menu based on user gestures.\n///\n/// By default, shows the menu on right clicks and long presses.\nclass _ContextMenuRegion extends StatefulWidget {\n  /// Creates an instance of [_ContextMenuRegion].\n  const _ContextMenuRegion({\n    required this.child,\n    required this.contextMenuBuilder,\n  });\n\n  /// Builds the context menu.\n  final ContextMenuBuilder contextMenuBuilder;\n\n  /// The child widget that will be listened to for gestures.\n  final Widget child;\n\n  @override\n  State\u003c_ContextMenuRegion\u003e createState() =\u003e _ContextMenuRegionState();\n}\n\nclass _ContextMenuRegionState extends State\u003c_ContextMenuRegion\u003e {\n  final controller = ContextMenuController();\n\n  void _onSecondaryTapDown(TapDownDetails details) {\n    _show(details.globalPosition);\n  }\n\n  void _onTap() {\n    if (!controller.isShown) {\n      return;\n    }\n    _hide();\n  }\n\n  void _show(Offset position) {\n    controller.show(\n      context: context,\n      contextMenuBuilder: (BuildContext context) {\n        return widget.contextMenuBuilder(context, position);\n      },\n    );\n  }\n\n  void _hide() {\n    controller.remove();\n  }\n\n  @override\n  void dispose() {\n    _hide();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return GestureDetector(\n      onSecondaryTapDown: _onSecondaryTapDown,\n      onTap: _onTap,\n      child: widget.child,\n    );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnank1ro%2Fdisable_web_context_menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnank1ro%2Fdisable_web_context_menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnank1ro%2Fdisable_web_context_menu/lists"}