flutter_context_menu

Description:

flutter context menu

Flutter Context Menu

A Flutter library that provides a flexible and customizable solution for creating and displaying context menus in Flutter applications. It allows you to easily add context menus to your UI, providing users with a convenient way to access additional options and actions specific to the selected item or area.


View Example

·

Report Bug

·

Request Feature


























Features #


ContextMenu: The package includes a highly customizable context menu system that can be easily integrated into your Flutter application. It provides a seamless and intuitive user experience, enhancing the usability of your app.


Hierarchical Structure: The context menu supports a hierarchical structure with submenu functionality. This enables you to create nested menus, providing a clear and organized representation of options and suboptions.


Selection Handling: The package includes built-in selection handling for context menu items. It allows you to define callback functions for individual menu items, enabling you to execute specific actions or logic when an item is selected.


Customization Options: Customize the appearance and behavior of the context menu to match your app's design and requirements. Modify the style, positioning, animation, and interaction of the menu to create a cohesive user interface.


Built-in Components: The package includes built-in components, such as MenuItem, MenuDivider, and MenuHeader, that can be used in your context menu.


Cross Platform Support: The package is compatible with multiple platforms, including Android, iOS, Web, and Desktop.


Getting Started #
Installation #


Method 1 (Recommended):
run this command in your terminal:
flutter pub add flutter_context_menu
copied to clipboard


Method 2:
add this line to your pubspec.yaml dependencies:
dependencies:
flutter_context_menu: ^0.2.0
copied to clipboard
then, run this command in your terminal:
flutter pub get
copied to clipboard


Usage #


First, import the package:
import 'package:flutter_context_menu/flutter_context_menu.dart';
copied to clipboard


Then, initialize a ContextMenu instance:
// define your context menu entries
final entries = <ContextMenuEntry>[
const MenuHeader(text: "Context Menu"),
MenuItem(
label: 'Copy',
icon: Icons.copy,
onSelected: () {
// implement copy
},
),
MenuItem(
label: 'Paste',
icon: Icons.paste,
onSelected: () {
// implement paste
},
),
const MenuDivider(),
MenuItem.submenu(
label: 'Edit',
icon: Icons.edit,
items: [
MenuItem(
label: 'Undo',
value: "Undo",
icon: Icons.undo,
onSelected: () {
// implement undo
},
),
MenuItem(
label: 'Redo',
value: 'Redo',
icon: Icons.redo,
onSelected: () {
// implement redo
},
),
],
),
];

// initialize a context menu
final menu = ContextMenu(
entries: entries,
position: const Offset(300, 300),
padding: const EdgeInsets.all(8.0),
);
copied to clipboard


Finally, to show the context menu, there are two ways:


Method 1: Directly calling one of the show methods.

This will show the context menu at the manually specified position.

showContextMenu(context, contextMenu: menu);
// or
final selectedValue = await menu.show(context);
print(selectedValue);
copied to clipboard


Method 2: Using the ContextMenuRegion widget to show the context menu when the user right-clicks or long-presses the region area.

This will show the context menu where the user clicks when the position property is not specified in the ContextMenu constructor.

...

@override
Widget build(BuildContext context) {
return Column(
children: [
ContextMenuRegion(
contextMenu: contextMenu,
onItemSelected: (value) {
print(value);
},
child: Container(
color: Colors.indigo,
height: 300,
width: 300,
child: const Center(
child: Text(
'Right click or long press!',
),
),
),
)
],
);
}
copied to clipboard




Customization #

Theme: By default, the context menu and its items uses the MaterialApp's theme data for styling. However, you can customize the appearance and behavior of the context menu by modifying the theme data. Or individually by specifying a BoxDecoration in the boxDecoration property of the ContextMenu.


Custom Entries: You can create your own context menu entries by subclassing the ContextMenuEntry class. This allows you to customize the appearance, behavior, and functionality of the context menu items.

Learn More #

More info: Full documentation will be provided, inshallah 🙏
See: Full Example

Feedback and Contributions #
If you have any suggestions or feedback, please open an issue or create a pull request.
If you like this package, please star it and follow me on X and GitHub.
License #
This project is licensed under the BSD 3-Clause License.


Made with ❤️ in Egypt 🇪🇬

🇵🇸 Stand With Palestine 🇵🇸