Add a menu example to show menu system (#1578)

experimental/material_3_demo/lib/component_screen.dart

@@ -179,14 +179,11 @@ class _ButtonsState extends State<Buttons> {
           'Use ElevatedButton, FilledButton, FilledButton.tonal, OutlinedButton, or TextButton',
       child: SingleChildScrollView(
         scrollDirection: Axis.horizontal,
-        padding: const EdgeInsets.symmetric(horizontal: tinySpacing),
+        child: Row(
-        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
-          crossAxisAlignment: CrossAxisAlignment.start,
           children: const <Widget>[
             ButtonsWithoutIcon(isDisabled: false),
-            colDivider,
             ButtonsWithIcon(),
-            colDivider,
             ButtonsWithoutIcon(isDisabled: true),
           ],
         ),
@@ -202,33 +199,39 @@ class ButtonsWithoutIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 5.0),
+      child: IntrinsicWidth(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
             ElevatedButton(
               onPressed: isDisabled ? null : () {},
               child: const Text('Elevated'),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             FilledButton(
               onPressed: isDisabled ? null : () {},
               child: const Text('Filled'),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             FilledButton.tonal(
               onPressed: isDisabled ? null : () {},
               child: const Text('Filled tonal'),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             OutlinedButton(
               onPressed: isDisabled ? null : () {},
               child: const Text('Outlined'),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             TextButton(
               onPressed: isDisabled ? null : () {},
               child: const Text('Text'),
             ),
           ],
+        ),
+      ),
     );
   }
 }
@@ -238,38 +241,44 @@ class ButtonsWithIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 10.0),
+      child: IntrinsicWidth(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
             ElevatedButton.icon(
               onPressed: () {},
               icon: const Icon(Icons.add),
               label: const Text('Icon'),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             FilledButton.icon(
               onPressed: () {},
               label: const Text('Icon'),
               icon: const Icon(Icons.add),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             FilledButton.tonalIcon(
               onPressed: () {},
               label: const Text('Icon'),
               icon: const Icon(Icons.add),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             OutlinedButton.icon(
               onPressed: () {},
               icon: const Icon(Icons.add),
               label: const Text('Icon'),
             ),
-        const SizedBox(width: tinySpacing),
+            colDivider,
             TextButton.icon(
               onPressed: () {},
               icon: const Icon(Icons.add),
               label: const Text('Icon'),
             )
           ],
+        ),
+      ),
     );
   }
 }
@@ -1516,10 +1525,7 @@ class BottomAppBars extends StatelessWidget {
               bottomNavigationBar: BottomAppBar(
                 child: Row(
                   children: <Widget>[
-                    IconButton(
+                    const IconButtonAnchorExample(),
-                      icon: const Icon(Icons.more_vert),
-                      onPressed: () {},
-                    ),
                     IconButton(
                       tooltip: 'Search',
                       icon: const Icon(Icons.search),
@@ -1541,6 +1547,94 @@ class BottomAppBars extends StatelessWidget {
   }
 }
 
+class IconButtonAnchorExample extends StatelessWidget {
+  const IconButtonAnchorExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MenuAnchor(
+      builder: (context, controller, child) {
+        return IconButton(
+          onPressed: () {
+            if (controller.isOpen) {
+              controller.close();
+            } else {
+              controller.open();
+            }
+          },
+          icon: const Icon(Icons.more_vert),
+        );
+      },
+      menuChildren: [
+        MenuItemButton(
+          child: const Text('Menu 1'),
+          onPressed: () {},
+        ),
+        MenuItemButton(
+          child: const Text('Menu 2'),
+          onPressed: () {},
+        ),
+        SubmenuButton(
+          menuChildren: <Widget>[
+            MenuItemButton(
+              onPressed: () {},
+              child: const Text('Menu 3.1'),
+            ),
+            MenuItemButton(
+              onPressed: () {},
+              child: const Text('Menu 3.2'),
+            ),
+            MenuItemButton(
+              onPressed: () {},
+              child: const Text('Menu 3.3'),
+            ),
+          ],
+          child: const Text('Menu 3'),
+        ),
+      ],
+    );
+  }
+}
+
+class ButtonAnchorExample extends StatelessWidget {
+  const ButtonAnchorExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MenuAnchor(
+      builder: (context, controller, child) {
+        return FilledButton.tonal(
+          onPressed: () {
+            if (controller.isOpen) {
+              controller.close();
+            } else {
+              controller.open();
+            }
+          },
+          child: const Text('Show menu'),
+        );
+      },
+      menuChildren: [
+        MenuItemButton(
+          leadingIcon: const Icon(Icons.people_alt_outlined),
+          child: const Text('Item 1'),
+          onPressed: () {},
+        ),
+        MenuItemButton(
+          leadingIcon: const Icon(Icons.remove_red_eye_outlined),
+          child: const Text('Item 2'),
+          onPressed: () {},
+        ),
+        MenuItemButton(
+          leadingIcon: const Icon(Icons.refresh),
+          onPressed: () {},
+          child: const Text('Item 3'),
+        ),
+      ],
+    );
+  }
+}
+
 class NavigationDrawers extends StatelessWidget {
   const NavigationDrawers({super.key, required this.scaffoldKey});
   final GlobalKey<ScaffoldState> scaffoldKey;
@@ -1727,9 +1821,23 @@ class _DropdownMenusState extends State<DropdownMenus> {
     }
 
     return ComponentDecoration(
-      label: 'Dropdown menus',
+      label: 'Menus',
-      tooltipMessage: 'Use DropdownMenu<T>',
+      tooltipMessage: 'Use DropdownMenu<T> or MenuAnchor',
-      child: Wrap(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: const <Widget>[
+              ButtonAnchorExample(),
+              rowDivider,
+              IconButtonAnchorExample(),
+            ],
+          ),
+          colDivider,
+          Wrap(
             alignment: WrapAlignment.spaceAround,
             runAlignment: WrapAlignment.start,
             crossAxisAlignment: WrapCrossAlignment.center,
@@ -1766,6 +1874,8 @@ class _DropdownMenusState extends State<DropdownMenus> {
               )
             ],
           ),
+        ],
+      ),
     );
   }
 }