mirror of https://github.com/flutter/samples.git
Cascading context menu (#1501)
parent
f8117cc885
commit
e93776ae04
@ -0,0 +1,300 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
|
||||
import 'constants.dart';
|
||||
import 'context_menu_region.dart';
|
||||
import 'platform_selector.dart';
|
||||
|
||||
// This example is based on the MenuBar docs example:
|
||||
// https://master-api.flutter.dev/flutter/material/MenuBar-class.html
|
||||
|
||||
class CascadingMenuPage extends StatelessWidget {
|
||||
const CascadingMenuPage({
|
||||
Key? key,
|
||||
required this.onChangedPlatform,
|
||||
}) : super(key: key);
|
||||
|
||||
static const String route = 'cascading';
|
||||
static const String title = 'Cascading Menu Example';
|
||||
static const String subtitle = 'A context menu with nested submenus.';
|
||||
|
||||
final PlatformCallback onChangedPlatform;
|
||||
|
||||
static const String url = '$kCodeUrl/anywhere_page.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text(CascadingMenuPage.title),
|
||||
actions: <Widget>[
|
||||
PlatformSelector(
|
||||
onChangedPlatform: onChangedPlatform,
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.code),
|
||||
onPressed: () async {
|
||||
if (!await launchUrl(Uri.parse(url))) {
|
||||
throw 'Could not launch $url';
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: const _MyContextMenuRegion(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MyContextMenuRegion extends StatefulWidget {
|
||||
const _MyContextMenuRegion();
|
||||
|
||||
@override
|
||||
State<_MyContextMenuRegion> createState() => _MyContextMenuRegionState();
|
||||
}
|
||||
|
||||
class _MyContextMenuRegionState extends State<_MyContextMenuRegion> {
|
||||
String? _lastSelection;
|
||||
|
||||
Color get backgroundColor => _backgroundColor;
|
||||
Color _backgroundColor = Colors.red;
|
||||
set backgroundColor(Color value) {
|
||||
if (_backgroundColor != value) {
|
||||
setState(() {
|
||||
_backgroundColor = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
bool get showingMessage => _showMessage;
|
||||
bool _showMessage = true;
|
||||
set showingMessage(bool value) {
|
||||
if (_showMessage != value) {
|
||||
setState(() {
|
||||
_showMessage = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ContextMenuRegion(
|
||||
contextMenuBuilder: (BuildContext context, Offset primaryAnchor,
|
||||
[Offset? secondaryAnchor]) {
|
||||
return _MyCascadingContextMenu(
|
||||
anchor: primaryAnchor,
|
||||
showingMessage: _showMessage,
|
||||
onToggleMessageVisibility: () {
|
||||
setState(() {
|
||||
_showMessage = !_showMessage;
|
||||
});
|
||||
},
|
||||
onChangeBackgroundColor: (Color color) {
|
||||
setState(() {
|
||||
_backgroundColor = color;
|
||||
});
|
||||
},
|
||||
onChangeSelection: (String selection) {
|
||||
setState(() {
|
||||
_lastSelection = selection;
|
||||
});
|
||||
},
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
alignment: Alignment.center,
|
||||
color: backgroundColor,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Text(
|
||||
showingMessage
|
||||
? 'Right click or long press anywhere to show the cascading menu.'
|
||||
: '',
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
_lastSelection != null ? 'Last Selected: $_lastSelection' : ''),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A class for consolidating the definition of menu entries.
|
||||
///
|
||||
/// This sort of class is not required, but illustrates one way that defining
|
||||
/// menus could be done.
|
||||
class MenuEntry {
|
||||
const MenuEntry(
|
||||
{required this.label, this.shortcut, this.onPressed, this.menuChildren})
|
||||
: assert(menuChildren == null || onPressed == null,
|
||||
'onPressed is ignored if menuChildren are provided');
|
||||
final String label;
|
||||
|
||||
final MenuSerializableShortcut? shortcut;
|
||||
final VoidCallback? onPressed;
|
||||
final List<MenuEntry>? menuChildren;
|
||||
|
||||
static List<Widget> build(List<MenuEntry> selections) {
|
||||
Widget buildSelection(MenuEntry selection) {
|
||||
if (selection.menuChildren != null) {
|
||||
return SubmenuButton(
|
||||
menuChildren: MenuEntry.build(selection.menuChildren!),
|
||||
child: Text(selection.label),
|
||||
);
|
||||
}
|
||||
return MenuItemButton(
|
||||
shortcut: selection.shortcut,
|
||||
onPressed: selection.onPressed,
|
||||
child: Text(selection.label),
|
||||
);
|
||||
}
|
||||
|
||||
return selections.map<Widget>(buildSelection).toList();
|
||||
}
|
||||
|
||||
static Map<MenuSerializableShortcut, Intent> shortcuts(
|
||||
List<MenuEntry> selections) {
|
||||
final Map<MenuSerializableShortcut, Intent> result =
|
||||
<MenuSerializableShortcut, Intent>{};
|
||||
for (final MenuEntry selection in selections) {
|
||||
if (selection.menuChildren != null) {
|
||||
result.addAll(MenuEntry.shortcuts(selection.menuChildren!));
|
||||
} else {
|
||||
if (selection.shortcut != null && selection.onPressed != null) {
|
||||
result[selection.shortcut!] =
|
||||
VoidCallbackIntent(selection.onPressed!);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
typedef _StringCallback = void Function(String string);
|
||||
typedef _ColorCallback = void Function(Color color);
|
||||
|
||||
class _MyCascadingContextMenu extends StatefulWidget {
|
||||
const _MyCascadingContextMenu({
|
||||
required this.anchor,
|
||||
required this.onToggleMessageVisibility,
|
||||
required this.onChangeBackgroundColor,
|
||||
required this.onChangeSelection,
|
||||
required this.showingMessage,
|
||||
});
|
||||
|
||||
final Offset anchor;
|
||||
final VoidCallback onToggleMessageVisibility;
|
||||
final _ColorCallback onChangeBackgroundColor;
|
||||
final _StringCallback onChangeSelection;
|
||||
final bool showingMessage;
|
||||
|
||||
@override
|
||||
State<_MyCascadingContextMenu> createState() =>
|
||||
_MyCascadingContextMenuState();
|
||||
}
|
||||
|
||||
class _MyCascadingContextMenuState extends State<_MyCascadingContextMenu> {
|
||||
ShortcutRegistryEntry? _shortcutsEntry;
|
||||
|
||||
List<MenuEntry> get _menus {
|
||||
final List<MenuEntry> result = <MenuEntry>[
|
||||
MenuEntry(
|
||||
label: 'About',
|
||||
onPressed: () {
|
||||
ContextMenuController.removeAny();
|
||||
showAboutDialog(
|
||||
context: context,
|
||||
applicationName: 'MenuBar Sample',
|
||||
applicationVersion: '1.0.0',
|
||||
);
|
||||
widget.onChangeSelection('About');
|
||||
},
|
||||
),
|
||||
MenuEntry(
|
||||
label: widget.showingMessage ? 'Hide' : 'Show',
|
||||
onPressed: () {
|
||||
ContextMenuController.removeAny();
|
||||
widget.onChangeSelection(
|
||||
widget.showingMessage ? 'Hide Message' : 'Show Message');
|
||||
widget.onToggleMessageVisibility();
|
||||
},
|
||||
shortcut: const SingleActivator(LogicalKeyboardKey.keyS, control: true),
|
||||
),
|
||||
// Hides the message, but is only enabled if the message isn't
|
||||
// already hidden.
|
||||
MenuEntry(
|
||||
label: 'Reset',
|
||||
onPressed: widget.showingMessage
|
||||
? () {
|
||||
ContextMenuController.removeAny();
|
||||
widget.onChangeSelection('Reset');
|
||||
widget.onToggleMessageVisibility();
|
||||
}
|
||||
: null,
|
||||
shortcut: const SingleActivator(LogicalKeyboardKey.escape),
|
||||
),
|
||||
MenuEntry(
|
||||
label: 'Color',
|
||||
menuChildren: <MenuEntry>[
|
||||
MenuEntry(
|
||||
label: 'Red',
|
||||
onPressed: () {
|
||||
ContextMenuController.removeAny();
|
||||
widget.onChangeSelection('Red Background');
|
||||
widget.onChangeBackgroundColor(Colors.red);
|
||||
},
|
||||
shortcut:
|
||||
const SingleActivator(LogicalKeyboardKey.keyR, control: true),
|
||||
),
|
||||
MenuEntry(
|
||||
label: 'Green',
|
||||
onPressed: () {
|
||||
ContextMenuController.removeAny();
|
||||
widget.onChangeSelection('Green Background');
|
||||
widget.onChangeBackgroundColor(Colors.green);
|
||||
},
|
||||
shortcut:
|
||||
const SingleActivator(LogicalKeyboardKey.keyG, control: true),
|
||||
),
|
||||
MenuEntry(
|
||||
label: 'Blue',
|
||||
onPressed: () {
|
||||
ContextMenuController.removeAny();
|
||||
widget.onChangeSelection('Blue Background');
|
||||
widget.onChangeBackgroundColor(Colors.blue);
|
||||
},
|
||||
shortcut:
|
||||
const SingleActivator(LogicalKeyboardKey.keyB, control: true),
|
||||
),
|
||||
],
|
||||
),
|
||||
];
|
||||
// (Re-)register the shortcuts with the ShortcutRegistry so that they are
|
||||
// available to the entire application, and update them if they've changed.
|
||||
_shortcutsEntry?.dispose();
|
||||
_shortcutsEntry =
|
||||
ShortcutRegistry.of(context).addAll(MenuEntry.shortcuts(result));
|
||||
return result;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_shortcutsEntry?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DesktopTextSelectionToolbar(
|
||||
anchor: widget.anchor,
|
||||
children: MenuEntry.build(_menus),
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1,125 @@
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
import 'package:context_menus/main.dart';
|
||||
import 'package:context_menus/cascading_menu_page.dart';
|
||||
|
||||
void main() {
|
||||
testWidgets('Can show and use the cascading menu',
|
||||
(WidgetTester tester) async {
|
||||
await tester.pumpWidget(const MyApp());
|
||||
|
||||
// Navigate to the CascadingMenuPage example.
|
||||
await tester.dragUntilVisible(
|
||||
find.text(CascadingMenuPage.title),
|
||||
find.byType(ListView),
|
||||
const Offset(0.0, -300.0),
|
||||
);
|
||||
await tester.tap(find.text(CascadingMenuPage.title));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
const String message =
|
||||
'Right click or long press anywhere to show the cascading menu.';
|
||||
expect(find.text(message), findsOneWidget);
|
||||
|
||||
// Right click on the background of the app to show the cascading context
|
||||
// menu.
|
||||
TestGesture gesture = await tester.startGesture(
|
||||
const Offset(0.0, 100.0),
|
||||
kind: PointerDeviceKind.mouse,
|
||||
buttons: kSecondaryMouseButton,
|
||||
);
|
||||
await tester.pump();
|
||||
await gesture.up();
|
||||
await gesture.removePointer();
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
// The custom cascading context menu is shown.
|
||||
expect(find.byType(DesktopTextSelectionToolbar), findsOneWidget);
|
||||
expect(find.text('About'), findsOneWidget);
|
||||
expect(find.text('Show'), findsNothing);
|
||||
expect(find.text('Hide'), findsOneWidget);
|
||||
expect(find.text('Reset'), findsOneWidget);
|
||||
expect(find.text('Color'), findsOneWidget);
|
||||
|
||||
// Click "Hide Message" and the message and menu are hidden.
|
||||
await tester.tap(find.text('Hide'));
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.byType(DesktopTextSelectionToolbar), findsNothing);
|
||||
expect(find.text(message), findsNothing);
|
||||
|
||||
// Right click to show the menu again.
|
||||
gesture = await tester.startGesture(
|
||||
const Offset(0.0, 100.0),
|
||||
kind: PointerDeviceKind.mouse,
|
||||
buttons: kSecondaryMouseButton,
|
||||
);
|
||||
await tester.pump();
|
||||
await gesture.up();
|
||||
await gesture.removePointer();
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.byType(DesktopTextSelectionToolbar), findsOneWidget);
|
||||
expect(find.text('About'), findsOneWidget);
|
||||
expect(find.text('Show'), findsOneWidget);
|
||||
expect(find.text('Hide'), findsNothing);
|
||||
expect(find.text('Reset'), findsOneWidget);
|
||||
expect(find.text('Color'), findsOneWidget);
|
||||
|
||||
// Use the shortcut to show the message again.
|
||||
await tester.sendKeyDownEvent(LogicalKeyboardKey.control);
|
||||
await tester.sendKeyDownEvent(LogicalKeyboardKey.keyS);
|
||||
await tester.sendKeyUpEvent(LogicalKeyboardKey.control);
|
||||
await tester.sendKeyUpEvent(LogicalKeyboardKey.keyS);
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.byType(DesktopTextSelectionToolbar), findsNothing);
|
||||
expect(find.text(message), findsOneWidget);
|
||||
|
||||
// Right click to show the menu again.
|
||||
gesture = await tester.startGesture(
|
||||
const Offset(0.0, 100.0),
|
||||
kind: PointerDeviceKind.mouse,
|
||||
buttons: kSecondaryMouseButton,
|
||||
);
|
||||
await tester.pump();
|
||||
await gesture.up();
|
||||
await gesture.removePointer();
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.byType(DesktopTextSelectionToolbar), findsOneWidget);
|
||||
expect(find.text('About'), findsOneWidget);
|
||||
expect(find.text('Show'), findsNothing);
|
||||
expect(find.text('Hide'), findsOneWidget);
|
||||
expect(find.text('Reset'), findsOneWidget);
|
||||
expect(find.text('Color'), findsOneWidget);
|
||||
expect(find.text('Red'), findsNothing);
|
||||
expect(find.text('Green'), findsNothing);
|
||||
expect(find.text('Blue'), findsNothing);
|
||||
|
||||
// Hover Background Color.
|
||||
gesture = await tester.startGesture(
|
||||
//tester.getCenter(find.text('Color')),
|
||||
const Offset(0.0, 100),
|
||||
kind: PointerDeviceKind.mouse,
|
||||
);
|
||||
await tester.pump();
|
||||
await gesture.moveTo(tester.getCenter(find.text('Color')));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
// Background colors are shown.
|
||||
expect(find.text('Red'), findsOneWidget);
|
||||
expect(find.text('Green'), findsOneWidget);
|
||||
expect(find.text('Blue'), findsOneWidget);
|
||||
|
||||
// Select green.
|
||||
await gesture.moveTo(tester.getCenter(find.text('Green')));
|
||||
await tester.pump();
|
||||
await tester.tap(find.text('Green'));
|
||||
await tester.pump();
|
||||
await gesture.removePointer();
|
||||
|
||||
// The menu is gone and the UI shows green was selected.
|
||||
expect(find.byType(DesktopTextSelectionToolbar), findsNothing);
|
||||
expect(find.text('Last Selected: Green Background'), findsOneWidget);
|
||||
});
|
||||
}
|
Loading…
Reference in new issue