Add a simplified SimpleCascadingMenuApp example (#149147)

The current MenuAnchor example in the API Docs is comprehensive and complicated for beginners. I have added a simple bare bone example without shortcuts, enums, etc in examples/api/lib/material/menu_anchor/ as `menu_anchor.3.dart`. The example is contributed by @mafreud

Fixes https://github.com/flutter/flutter/issues/148104
This commit is contained in:
Aditya Dwivedi 2024-06-03 22:41:36 +05:30 committed by GitHub
parent 8e15e56c81
commit 0e7295fd18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 124 additions and 0 deletions

View File

@ -0,0 +1,81 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
/// Flutter code sample for [SimpleCascadingMenuApp].
void main() => runApp(const SimpleCascadingMenuApp());
/// A Simple Cascading Menu example using the [MenuAnchor] Widget.
class MyCascadingMenu extends StatefulWidget {
const MyCascadingMenu({super.key});
@override
State<MyCascadingMenu> createState() => _MyCascadingMenuState();
}
class _MyCascadingMenuState extends State<MyCascadingMenu> {
final FocusNode _buttonFocusNode = FocusNode(debugLabel: 'Menu Button');
@override
void dispose() {
_buttonFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MenuAnchor(
childFocusNode: _buttonFocusNode,
menuChildren: <Widget>[
MenuItemButton(
onPressed: () {},
child: const Text('Revert'),
),
MenuItemButton(
onPressed: () {},
child: const Text('Setting'),
),
MenuItemButton(
onPressed: () {},
child: const Text('Send Feedback'),
),
],
builder: (_, MenuController controller, Widget? child) {
return IconButton(
focusNode: _buttonFocusNode,
onPressed: () {
if (controller.isOpen) {
controller.close();
} else {
controller.open();
}
},
icon: const Icon(Icons.more_vert),
);
},
);
}
}
/// Top Level Application Widget.
class SimpleCascadingMenuApp extends StatelessWidget {
const SimpleCascadingMenuApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('MenuAnchor Simple Example'),
actions: const <Widget>[
MyCascadingMenu(),
],
),
),
);
}
}

View File

@ -0,0 +1,36 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter_api_samples/material/menu_anchor/menu_anchor.3.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Menu button opens and closes the menu', (WidgetTester tester) async {
await tester.pumpWidget(const example.SimpleCascadingMenuApp());
// Find the menu button.
final Finder menuButton = find.byType(IconButton);
expect(menuButton, findsOneWidget);
// Tap the menu button to open the menu.
await tester.tap(menuButton);
await tester.pumpAndSettle();
// Verify that the menu is open.
expect(find.text('Revert'), findsOneWidget);
// Tap the menu button again to close the menu.
await tester.tap(menuButton);
await tester.pumpAndSettle();
// Verify that the menu is closed.
expect(find.text('Revert'), findsNothing);
});
testWidgets('Does not show debug banner', (WidgetTester tester) async {
await tester.pumpWidget(const example.SimpleCascadingMenuApp());
expect(find.byType(CheckedModeBanner), findsNothing);
});
}

View File

@ -119,6 +119,13 @@ typedef MenuAnchorChildBuilder = Widget Function(
///
/// ** See code in examples/api/lib/material/menu_anchor/menu_anchor.1.dart **
/// {@end-tool}
///
/// {@tool dartpad}
/// This example demonstrates a simplified cascading menu using the [MenuAnchor]
/// widget.
///
/// ** See code in examples/api/lib/material/menu_anchor/menu_anchor.3.dart **
/// {@end-tool}
class MenuAnchor extends StatefulWidget {
/// Creates a const [MenuAnchor].
///