Unverified Commit eadda3c3 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

Add Material 3 Popup Menu example and update existing example (#114228)

parent 8fe87287
...@@ -7,70 +7,59 @@ ...@@ -7,70 +7,59 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
// This is the type used by the popup menu below. // This is the type used by the popup menu below.
enum Menu { itemOne, itemTwo, itemThree, itemFour } enum SampleItem { itemOne, itemTwo, itemThree }
void main() => runApp(const MyApp()); void main() => runApp(const PopupMenuApp());
class MyApp extends StatelessWidget { class PopupMenuApp extends StatelessWidget {
const MyApp({super.key}); const PopupMenuApp({super.key});
static const String _title = 'Flutter Code Sample';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return const MaterialApp( return const MaterialApp(
debugShowCheckedModeBanner: false, home: PopupMenuExample(),
title: _title,
home: MyStatefulWidget(),
); );
} }
} }
class MyStatefulWidget extends StatefulWidget { class PopupMenuExample extends StatefulWidget {
const MyStatefulWidget({super.key}); const PopupMenuExample({super.key});
@override @override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); State<PopupMenuExample> createState() => _PopupMenuExampleState();
} }
class _MyStatefulWidgetState extends State<MyStatefulWidget> { class _PopupMenuExampleState extends State<PopupMenuExample> {
String _selectedMenu = ''; SampleItem? selectedMenu;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(title: const Text('PopupMenuButton')),
actions: <Widget>[ body: Center(
// This button presents popup menu items. child: PopupMenuButton<SampleItem>(
PopupMenuButton<Menu>( initialValue: selectedMenu,
// Callback that sets the selected popup menu item. // Callback that sets the selected popup menu item.
onSelected: (Menu item) { onSelected: (SampleItem item) {
setState(() { setState(() {
_selectedMenu = item.name; selectedMenu = item;
}); });
}, },
itemBuilder: (BuildContext context) => <PopupMenuEntry<Menu>>[ itemBuilder: (BuildContext context) => <PopupMenuEntry<SampleItem>>[
const PopupMenuItem<Menu>( const PopupMenuItem<SampleItem>(
value: Menu.itemOne, value: SampleItem.itemOne,
child: Text('Item 1'), child: Text('Item 1'),
), ),
const PopupMenuItem<Menu>( const PopupMenuItem<SampleItem>(
value: Menu.itemTwo, value: SampleItem.itemTwo,
child: Text('Item 2'), child: Text('Item 2'),
), ),
const PopupMenuItem<Menu>( const PopupMenuItem<SampleItem>(
value: Menu.itemThree, value: SampleItem.itemThree,
child: Text('Item 3'), child: Text('Item 3'),
), ),
const PopupMenuItem<Menu>( ],
value: Menu.itemFour, ),
child: Text('Item 4'),
),
]),
],
),
body: Center(
child: Text('_selectedMenu: $_selectedMenu'),
), ),
); );
} }
......
// 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.
/// Flutter code sample for [PopupMenuButton].
import 'package:flutter/material.dart';
// This is the type used by the popup menu below.
enum SampleItem { itemOne, itemTwo, itemThree }
void main() => runApp(const PopupMenuApp());
class PopupMenuApp extends StatelessWidget {
const PopupMenuApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true, colorSchemeSeed: const Color(0xff6750a4)),
home: const PopupMenuExample(),
);
}
}
class PopupMenuExample extends StatefulWidget {
const PopupMenuExample({super.key});
@override
State<PopupMenuExample> createState() => _PopupMenuExampleState();
}
class _PopupMenuExampleState extends State<PopupMenuExample> {
SampleItem? selectedMenu;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('PopupMenuButton')),
body: Center(
child: PopupMenuButton<SampleItem>(
initialValue: selectedMenu,
// Callback that sets the selected popup menu item.
onSelected: (SampleItem item) {
setState(() {
selectedMenu = item;
});
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<SampleItem>>[
const PopupMenuItem<SampleItem>(
value: SampleItem.itemOne,
child: Text('Item 1'),
),
const PopupMenuItem<SampleItem>(
value: SampleItem.itemTwo,
child: Text('Item 2'),
),
const PopupMenuItem<SampleItem>(
value: SampleItem.itemThree,
child: Text('Item 3'),
),
],
),
),
);
}
}
...@@ -3,32 +3,31 @@ ...@@ -3,32 +3,31 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_api_samples/material/popupmenu/popupmenu.0.dart' as example; import 'package:flutter_api_samples/material/popup_menu/popup_menu.0.dart' as example;
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
void main() { void main() {
testWidgets('Can select a menu item', (WidgetTester tester) async { testWidgets('Can open popup menu', (WidgetTester tester) async {
final Key popupButtonKey = UniqueKey(); const String menuItem = 'Item 1';
await tester.pumpWidget( await tester.pumpWidget(
MaterialApp( const MaterialApp(
home: Scaffold( home: Scaffold(
body: example.MyStatefulWidget( body: example.PopupMenuApp(),
key: popupButtonKey,
),
), ),
), ),
); );
await tester.tap(find.byKey(popupButtonKey)); expect(find.text(menuItem), findsNothing);
await tester.pump();
await tester.pump(const Duration(seconds: 1)); // finish the menu animation // Open popup menu.
await tester.tapAt(const Offset(1.0, 1.0)); await tester.tap(find.byIcon(Icons.adaptive.more));
await tester.pumpAndSettle(); await tester.pumpAndSettle();
expect(find.text('_selectedMenu: itemOne'), findsNothing); expect(find.text(menuItem), findsOneWidget);
});
testWidgets('Does not show debug banner', (WidgetTester tester) async { // Close popup menu.
await tester.pumpWidget(const example.MyApp()); await tester.tapAt(const Offset(1, 1));
expect(find.byType(CheckedModeBanner), findsNothing); await tester.pumpAndSettle();
expect(find.text(menuItem), findsNothing);
}); });
} }
// 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/popup_menu/popup_menu.1.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Can open popup menu', (WidgetTester tester) async {
const String menuItem = 'Item 1';
await tester.pumpWidget(
const MaterialApp(
home: Scaffold(
body: example.PopupMenuApp(),
),
),
);
expect(find.text(menuItem), findsNothing);
// Open popup menu.
await tester.tap(find.byIcon(Icons.adaptive.more));
await tester.pumpAndSettle();
expect(find.text(menuItem), findsOneWidget);
// Close popup menu.
await tester.tapAt(const Offset(1, 1));
await tester.pumpAndSettle();
expect(find.text(menuItem), findsNothing);
});
}
...@@ -1017,10 +1017,17 @@ typedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext ...@@ -1017,10 +1017,17 @@ typedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext
/// platform). /// platform).
/// ///
/// {@tool dartpad} /// {@tool dartpad}
/// This example shows a menu with four items, selecting between an enum's /// This example shows a menu with three items, selecting between an enum's
/// values and setting a `_selectedMenu` field based on the selection /// values and setting a `selectedMenu` field based on the selection.
/// ///
/// ** See code in examples/api/lib/material/popupmenu/popupmenu.0.dart ** /// ** See code in examples/api/lib/material/popup_menu/popup_menu.0.dart **
/// {@end-tool}
///
/// {@tool dartpad}
/// This sample shows the creation of a popup menu, as described in:
/// https://m3.material.io/components/menus/overview
///
/// ** See code in examples/api/lib/material/popup_menu/popup_menu.1.dart **
/// {@end-tool} /// {@end-tool}
/// ///
/// See also: /// See also:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment