context_menus

Description:

context menus

context_menus #
A package to show context menus on right-click or long-press.

🔨 Installation #
dependencies:
context_menus: ^1.0.2
copied to clipboard
⚙ Import #
import 'package:context_menus/context_menus.dart';
copied to clipboard
🕹️ Usage #
To get started, wrap a ContextMenuOverlay around your top-most view or app:
return ContextMenuOverlay(
child: MaterialApp(...)
);
copied to clipboard
You can then use the ContextMenuRegion widget to tag sections of the Widget tree that should trigger a context menu.
/// Example hyperlink menu
return ContextMenuRegion(
contextMenu: LinkContextMenu(url: 'http://flutter.dev'),
child: TextButton(onPressed: () {}, child: Text("http://flutter.dev")),
),
copied to clipboard
Each ContextMenuRegion requires a contextMenu widget which will be shown on right-click or long-press.
Included in this package are a few pre-made ones which you can use as templates to quickly build your own.

LinkContextMenu
TextContextMenu
GenericContextMenu

✨ ️Styling #
You have three options to modify styling

pass in custom ContextMenuButtonStyle for small styling tweaks
use your own cardBuilder or buttonBuilder delegate for more control
pass your own custom menus for total control

For basic styling, just pass button styling values to the ContextMenuOverlay:
return ContextMenuOverlay(
buttonStyle: ContextMenuButtonStyle(
fgColor: Colors.green,
bgColor: Colors.red.shade100,
hoverBgColor: Colors.red.shade200,
),
child: MaterialApp(...);
}
copied to clipboard
For more control, you can overide the cardBuilder and buttonBuilder delegates:
return ContextMenuOverlay(
/// Make a custom background
cardBuilder: (_, children) => Container(color: Colors.purple.shade100, child: Column(children: children)),
/// Make custom buttons
buttonBuilder: (_, config, [__]) => TextButton(
onPressed: config.onPressed,
child: Container(width: double.infinity, child: Text(config.label)),
),
child: MaterialApp( ... ),
);
copied to clipboard
Finally, you can disregard all of this and just provide your own menus directly to the ContextMenuRegion:
ContextMenuRegion(
contextMenu: MyCustomMenu(),
child: ...,
),
copied to clipboard
In this case, you are responsible for closing the menu when your buttons are triggered, which you can do using an extension on BuildContext:
context.contextMenuOverlay.hide();
copied to clipboard
💡 Custom Menus #
The easiest way to create a custom menu is to use the GenericContextMenu. Just pass it a list of ContextMenuButtonConfig instances:
/// Custom Context Menu for an Image
ContextMenuRegion(
contextMenu: GenericContextMenu(
buttonConfigs: [
ContextMenuButtonConfig(
"View image in browser",
onPressed: () => launch(_testImageUrl),
),
ContextMenuButtonConfig(
"Copy image path",
onPressed: () => Clipboard.setData(ClipboardData(text: _testImageUrl)),
)
],
),
child: Image.network(_testImageUrl),
),
copied to clipboard
Another easy way to create custom menus is to use the ContextMenuStateMixin, and then call the cardBuilder and buttonBuilder methods to create your commands.
You can see this in action with the existing LinkContextMenu:
class _LinkContextMenuState extends State<LinkContextMenu> with ContextMenuStateMixin {
@override
Widget build(BuildContext context) {
// cardBuilder is provided to us by the mixin, pass it a list of children to layout
return cardBuilder.call(
context,
[
// buttonBuilder is also provided by the mixin, use it to build each btn
buttonBuilder.call(
context,
// button builder needs a config, so it knows how to setup the btn
ContextMenuButtonConfig(
"Open link in new window",
icon: widget.useIcons ? Icon(Icons.link, size: 18) : null,
onPressed: () => handlePressed(context, _handleNewWindowPressed),
),
),
buttonBuilder.call(
context,
ContextMenuButtonConfig(
"Copy link address",
icon: widget.useIcons ? Icon(Icons.copy, size: 18) : null,
onPressed: () => handlePressed(context, _handleClipboardPressed),
),
)
],
);
}
copied to clipboard
In the above example, you could provide your own Card and Buttons directly, rather than using the builders, but the builders give you a couple of advantages:

You can style all menus using the button and card builders on the ContextMenuOverlay
All buttons will auto-close the context menu when triggered, saving you some boilerplate
Your custom menus will match the existing set of menus

🐞 Bugs/Requests #
If you encounter any problems please open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are welcome.
📃 License #
MIT License