Update m3 demo in the base directory (#1615)

Co-authored-by: Qun Cheng <quncheng@google.com>

material_3_demo/lib/color_palettes_screen.dart

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
 
 const Widget divider = SizedBox(height: 10);
 
@@ -45,18 +47,46 @@ class ColorPalettesScreen extends StatelessWidget {
       );
     }
 
+    Widget dynamicColorNotice() => RichText(
+          textAlign: TextAlign.center,
+          text: TextSpan(
+            style: Theme.of(context).textTheme.bodySmall,
+            children: [
+              const TextSpan(
+                  text: 'To create color schemes based on a '
+                      'platform\'s implementation of dynamic color, '
+                      'use the '),
+              TextSpan(
+                text: 'dynamic_color',
+                style: const TextStyle(decoration: TextDecoration.underline),
+                recognizer: TapGestureRecognizer()
+                  ..onTap = () async {
+                    final url = Uri.parse(
+                      'https://pub.dev/packages/dynamic_color',
+                    );
+                    if (!await launchUrl(url)) {
+                      throw Exception('Could not launch $url');
+                    }
+                  },
+              ),
+              const TextSpan(text: ' package.'),
+            ],
+          ),
+        );
+
     return Expanded(
       child: LayoutBuilder(builder: (context, constraints) {
         if (constraints.maxWidth < narrowScreenWidthThreshold) {
           return SingleChildScrollView(
             child: Column(
               children: [
+                dynamicColorNotice(),
                 divider,
-                schemeLabel('Light Theme'),
+                schemeLabel('Light ColorScheme'),
                 schemeView(lightTheme),
                 divider,
                 divider,
-                schemeLabel('Dark Theme'),
+                schemeLabel('Dark ColorScheme'),
                 schemeView(darkTheme),
               ],
             ),
@@ -65,23 +95,28 @@ class ColorPalettesScreen extends StatelessWidget {
           return SingleChildScrollView(
             child: Padding(
               padding: const EdgeInsets.only(top: 5),
-              child: Row(
+              child: Column(
                 children: [
-                  Expanded(
-                    child: Column(
-                      children: [
-                        schemeLabel('Light Theme'),
-                        schemeView(lightTheme),
-                      ],
-                    ),
-                  ),
-                  Expanded(
-                    child: Column(
-                      children: [
-                        schemeLabel('Dark Theme'),
-                        schemeView(darkTheme),
-                      ],
-                    ),
+                  dynamicColorNotice(),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: Column(
+                          children: [
+                            schemeLabel('Light ColorScheme'),
+                            schemeView(lightTheme),
+                          ],
+                        ),
+                      ),
+                      Expanded(
+                        child: Column(
+                          children: [
+                            schemeLabel('Dark ColorScheme'),
+                            schemeView(darkTheme),
+                          ],
+                        ),
+                      ),
+                    ],
                   ),
                 ],
               ),

material_3_demo/lib/component_screen.dart

@@ -112,6 +112,9 @@ class Containment extends StatelessWidget {
       BottomSheetSection(),
       Cards(),
       Dialogs(),
+      Dividers(),
+      // TODO: Add Lists, https://github.com/flutter/flutter/issues/114006
+      // TODO: Add Side sheets, https://github.com/flutter/flutter/issues/119328
     ]);
   }
 }
@@ -130,7 +133,10 @@ class Navigation extends StatelessWidget {
         isExampleBar: true,
       ),
       NavigationDrawers(scaffoldKey: scaffoldKey),
+      const NavigationRails(),
+      // TODO: Add Search https://github.com/flutter/flutter/issues/117483
       const Tabs(),
+      const TopAppBars(),
     ]);
   }
 }
@@ -141,12 +147,14 @@ class Selection extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return const ComponentGroupDecoration(label: 'Selection', children: [
-      Chips(),
-      DropdownMenus(),
-      Radios(),
       Checkboxes(),
+      Chips(),
+      // TODO: Add Date pickers https://github.com/flutter/flutter/issues/101481
+      Menus(),
+      Radios(),
       Sliders(),
       Switches(),
+      // TODO: Add Time pickers https://github.com/flutter/flutter/issues/101480
     ]);
   }
 }
@@ -179,14 +187,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: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
           children: const <Widget>[
             ButtonsWithoutIcon(isDisabled: false),
-            colDivider,
             ButtonsWithIcon(),
-            colDivider,
             ButtonsWithoutIcon(isDisabled: true),
           ],
         ),
@@ -202,33 +207,39 @@ class ButtonsWithoutIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: <Widget>[
-        ElevatedButton(
-          onPressed: isDisabled ? null : () {},
-          child: const Text('Elevated'),
+    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'),
+            ),
+            colDivider,
+            FilledButton(
+              onPressed: isDisabled ? null : () {},
+              child: const Text('Filled'),
+            ),
+            colDivider,
+            FilledButton.tonal(
+              onPressed: isDisabled ? null : () {},
+              child: const Text('Filled tonal'),
+            ),
+            colDivider,
+            OutlinedButton(
+              onPressed: isDisabled ? null : () {},
+              child: const Text('Outlined'),
+            ),
+            colDivider,
+            TextButton(
+              onPressed: isDisabled ? null : () {},
+              child: const Text('Text'),
+            ),
+          ],
         ),
-        const SizedBox(width: tinySpacing),
-        FilledButton(
-          onPressed: isDisabled ? null : () {},
-          child: const Text('Filled'),
-        ),
-        const SizedBox(width: tinySpacing),
-        FilledButton.tonal(
-          onPressed: isDisabled ? null : () {},
-          child: const Text('Filled tonal'),
-        ),
-        const SizedBox(width: tinySpacing),
-        OutlinedButton(
-          onPressed: isDisabled ? null : () {},
-          child: const Text('Outlined'),
-        ),
-        const SizedBox(width: tinySpacing),
-        TextButton(
-          onPressed: isDisabled ? null : () {},
-          child: const Text('Text'),
-        ),
-      ],
+      ),
     );
   }
 }
@@ -238,38 +249,44 @@ class ButtonsWithIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: <Widget>[
-        ElevatedButton.icon(
-          onPressed: () {},
-          icon: const Icon(Icons.add),
-          label: const Text('Icon'),
+    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'),
+            ),
+            colDivider,
+            FilledButton.icon(
+              onPressed: () {},
+              label: const Text('Icon'),
+              icon: const Icon(Icons.add),
+            ),
+            colDivider,
+            FilledButton.tonalIcon(
+              onPressed: () {},
+              label: const Text('Icon'),
+              icon: const Icon(Icons.add),
+            ),
+            colDivider,
+            OutlinedButton.icon(
+              onPressed: () {},
+              icon: const Icon(Icons.add),
+              label: const Text('Icon'),
+            ),
+            colDivider,
+            TextButton.icon(
+              onPressed: () {},
+              icon: const Icon(Icons.add),
+              label: const Text('Icon'),
+            )
+          ],
         ),
-        const SizedBox(width: tinySpacing),
-        FilledButton.icon(
-          onPressed: () {},
-          label: const Text('Icon'),
-          icon: const Icon(Icons.add),
-        ),
-        const SizedBox(width: tinySpacing),
-        FilledButton.tonalIcon(
-          onPressed: () {},
-          label: const Text('Icon'),
-          icon: const Icon(Icons.add),
-        ),
-        const SizedBox(width: tinySpacing),
-        OutlinedButton.icon(
-          onPressed: () {},
-          icon: const Icon(Icons.add),
-          label: const Text('Icon'),
-        ),
-        const SizedBox(width: tinySpacing),
-        TextButton.icon(
-          onPressed: () {},
-          icon: const Icon(Icons.add),
-          label: const Text('Icon'),
-        )
-      ],
+      ),
     );
   }
 }
@@ -597,21 +614,74 @@ class _DialogsState extends State<Dialogs> {
     );
   }
 
+  void openFullscreenDialog(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      builder: (context) => Dialog.fullscreen(
+        child: Padding(
+          padding: const EdgeInsets.all(20.0),
+          child: Scaffold(
+            appBar: AppBar(
+              title: const Text('Full-screen dialog'),
+              centerTitle: false,
+              leading: IconButton(
+                icon: const Icon(Icons.close),
+                onPressed: () => Navigator.of(context).pop(),
+              ),
+              actions: [
+                TextButton(
+                  child: const Text('Close'),
+                  onPressed: () => Navigator.of(context).pop(),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: ComponentDecoration(
-        label: 'Dialog',
-        tooltipMessage: 'Use AlertDialog or SimpleDialog',
-        child: UnconstrainedBox(
-          child: TextButton(
+    return ComponentDecoration(
+      label: 'Dialog',
+      tooltipMessage:
+          'Use showDialog with Dialog.fullscreen, AlertDialog, or SimpleDialog',
+      child: Wrap(
+        alignment: WrapAlignment.spaceBetween,
+        children: [
+          TextButton(
             child: const Text(
               'Show dialog',
               style: TextStyle(fontWeight: FontWeight.bold),
             ),
             onPressed: () => openDialog(context),
           ),
-        ),
+          TextButton(
+            child: const Text(
+              'Show full-screen dialog',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ),
+            onPressed: () => openFullscreenDialog(context),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class Dividers extends StatelessWidget {
+  const Dividers({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ComponentDecoration(
+      label: 'Dividers',
+      tooltipMessage: 'Use Divider or VerticalDivider',
+      child: Column(
+        children: const <Widget>[
+          Divider(key: Key('divider')),
+        ],
       ),
     );
   }
@@ -1299,7 +1369,7 @@ class SegmentedButtons extends StatelessWidget {
   Widget build(BuildContext context) {
     return ComponentDecoration(
       label: 'Segmented buttons',
-      tooltipMessage: 'Use SegmentedButton',
+      tooltipMessage: 'Use SegmentedButton<T>',
       child: Column(
         children: const <Widget>[
           SingleChoice(),
@@ -1400,7 +1470,8 @@ class SnackBarSection extends StatelessWidget {
   Widget build(BuildContext context) {
     return ComponentDecoration(
       label: 'Snackbar',
-      tooltipMessage: 'Use SnackBar',
+      tooltipMessage:
+          'Use ScaffoldMessenger.of(context).showSnackBar with SnackBar',
       child: TextButton(
         onPressed: () {
           final snackBar = SnackBar(
@@ -1425,9 +1496,17 @@ class SnackBarSection extends StatelessWidget {
   }
 }
 
-class BottomSheetSection extends StatelessWidget {
+class BottomSheetSection extends StatefulWidget {
   const BottomSheetSection({super.key});
 
+  @override
+  State<BottomSheetSection> createState() => _BottomSheetSectionState();
+}
+
+class _BottomSheetSectionState extends State<BottomSheetSection> {
+  bool isNonModalBottomSheetOpen = false;
+  PersistentBottomSheetController<void>? _nonModalBottomSheetController;
+
   @override
   Widget build(BuildContext context) {
     List<Widget> buttonList = <Widget>[
@@ -1463,31 +1542,77 @@ class BottomSheetSection extends StatelessWidget {
     return ComponentDecoration(
       label: 'Bottom sheet',
       tooltipMessage: 'Use showModalBottomSheet<T> or showBottomSheet<T>',
-      child: TextButton(
-        child: const Text(
-          'Show bottom sheet',
-          style: TextStyle(fontWeight: FontWeight.bold),
-        ),
-        onPressed: () {
-          showModalBottomSheet<void>(
-            context: context,
-            // TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
-            constraints: const BoxConstraints(maxWidth: 640),
-            builder: (context) {
-              return SizedBox(
-                height: 150,
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 32.0),
-                  child: ListView(
-                    shrinkWrap: true,
-                    scrollDirection: Axis.horizontal,
-                    children: buttonList,
-                  ),
-                ),
+      child: Wrap(
+        alignment: WrapAlignment.spaceEvenly,
+        children: [
+          TextButton(
+            child: const Text(
+              'Show modal bottom sheet',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ),
+            onPressed: () {
+              showModalBottomSheet<void>(
+                context: context,
+                // TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
+                constraints: const BoxConstraints(maxWidth: 640),
+                builder: (context) {
+                  return SizedBox(
+                    height: 150,
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 32.0),
+                      child: ListView(
+                        shrinkWrap: true,
+                        scrollDirection: Axis.horizontal,
+                        children: buttonList,
+                      ),
+                    ),
+                  );
+                },
               );
             },
-          );
-        },
+          ),
+          TextButton(
+            child: Text(
+              isNonModalBottomSheetOpen
+                  ? 'Hide bottom sheet'
+                  : 'Show bottom sheet',
+              style: const TextStyle(fontWeight: FontWeight.bold),
+            ),
+            onPressed: () {
+              if (isNonModalBottomSheetOpen) {
+                _nonModalBottomSheetController?.close();
+                setState(() {
+                  isNonModalBottomSheetOpen = false;
+                });
+                return;
+              } else {
+                setState(() {
+                  isNonModalBottomSheetOpen = true;
+                });
+              }
+
+              _nonModalBottomSheetController = showBottomSheet<void>(
+                elevation: 8.0,
+                context: context,
+                // TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
+                constraints: const BoxConstraints(maxWidth: 640),
+                builder: (context) {
+                  return SizedBox(
+                    height: 150,
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 32.0),
+                      child: ListView(
+                        shrinkWrap: true,
+                        scrollDirection: Axis.horizontal,
+                        children: buttonList,
+                      ),
+                    ),
+                  );
+                },
+              );
+            },
+          ),
+        ],
       ),
     );
   }
@@ -1516,10 +1641,7 @@ class BottomAppBars extends StatelessWidget {
               bottomNavigationBar: BottomAppBar(
                 child: Row(
                   children: <Widget>[
-                    IconButton(
-                      icon: const Icon(Icons.more_vert),
-                      onPressed: () {},
-                    ),
+                    const IconButtonAnchorExample(),
                     IconButton(
                       tooltip: 'Search',
                       icon: const Icon(Icons.search),
@@ -1541,6 +1663,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;
@@ -1549,15 +1759,21 @@ class NavigationDrawers extends StatelessWidget {
   Widget build(BuildContext context) {
     return ComponentDecoration(
       label: 'Navigation drawer',
-      tooltipMessage: 'Use NavigationDrawer',
-      child: UnconstrainedBox(
-        child: TextButton(
-          child: const Text('Show navigation drawer',
-              style: TextStyle(fontWeight: FontWeight.bold)),
-          onPressed: () {
-            scaffoldKey.currentState!.openEndDrawer();
-          },
-        ),
+      tooltipMessage:
+          'Use NavigationDrawer. For modal navigation drawers, see Scaffold.endDrawer',
+      child: Column(
+        children: [
+          const SizedBox(height: 520, child: NavigationDrawerSection()),
+          colDivider,
+          colDivider,
+          TextButton(
+            child: const Text('Show modal navigation drawer',
+                style: TextStyle(fontWeight: FontWeight.bold)),
+            onPressed: () {
+              scaffoldKey.currentState!.openEndDrawer();
+            },
+          ),
+        ],
       ),
     );
   }
@@ -1598,10 +1814,7 @@ class _NavigationDrawerSectionState extends State<NavigationDrawerSection> {
             selectedIcon: destination.selectedIcon,
           );
         }),
-        const Padding(
-          padding: EdgeInsets.symmetric(horizontal: 28),
-          child: Divider(),
-        ),
+        const Divider(indent: 28, endIndent: 28),
         Padding(
           padding: const EdgeInsets.fromLTRB(28, 16, 16, 10),
           child: Text(
@@ -1645,6 +1858,57 @@ const List<ExampleDestination> labelDestinations = <ExampleDestination>[
   ExampleDestination('Work', Icon(Icons.bookmark_border), Icon(Icons.bookmark)),
 ];
 
+class NavigationRails extends StatelessWidget {
+  const NavigationRails({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const ComponentDecoration(
+      label: 'Navigation rail',
+      tooltipMessage: 'Use NavigationRail',
+      child: IntrinsicWidth(
+          child: SizedBox(height: 420, child: NavigationRailSection())),
+    );
+  }
+}
+
+class NavigationRailSection extends StatefulWidget {
+  const NavigationRailSection({super.key});
+
+  @override
+  State<NavigationRailSection> createState() => _NavigationRailSectionState();
+}
+
+class _NavigationRailSectionState extends State<NavigationRailSection> {
+  int navRailIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return NavigationRail(
+      onDestinationSelected: (selectedIndex) {
+        setState(() {
+          navRailIndex = selectedIndex;
+        });
+      },
+      elevation: 4,
+      leading: FloatingActionButton(
+          child: const Icon(Icons.create), onPressed: () {}),
+      groupAlignment: 0.0,
+      selectedIndex: navRailIndex,
+      labelType: NavigationRailLabelType.selected,
+      destinations: <NavigationRailDestination>[
+        ...destinations.map((destination) {
+          return NavigationRailDestination(
+            label: Text(destination.label),
+            icon: destination.icon,
+            selectedIcon: destination.selectedIcon,
+          );
+        }),
+      ],
+    );
+  }
+}
+
 class Tabs extends StatefulWidget {
   const Tabs({super.key});
 
@@ -1690,6 +1954,7 @@ class _TabsState extends State<Tabs> with TickerProviderStateMixin {
                 ),
               ],
             ),
+            // TODO: Showcase secondary tab bar https://github.com/flutter/flutter/issues/111962
           ),
         ),
       ),
@@ -1697,14 +1962,84 @@ class _TabsState extends State<Tabs> with TickerProviderStateMixin {
   }
 }
 
-class DropdownMenus extends StatefulWidget {
-  const DropdownMenus({super.key});
+class TopAppBars extends StatelessWidget {
+  const TopAppBars({super.key});
+
+  static final actions = [
+    IconButton(icon: const Icon(Icons.attach_file), onPressed: () {}),
+    IconButton(icon: const Icon(Icons.event), onPressed: () {}),
+    IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
+  ];
 
   @override
-  State<DropdownMenus> createState() => _DropdownMenusState();
+  Widget build(BuildContext context) {
+    return ComponentDecoration(
+      label: 'Top app bars',
+      tooltipMessage:
+          'Use AppBar, SliverAppBar, SliverAppBar.medium, or  SliverAppBar.large',
+      child: Column(
+        children: [
+          AppBar(
+            title: const Text('Center-aligned'),
+            leading: const BackButton(),
+            actions: [
+              IconButton(
+                iconSize: 32,
+                icon: const Icon(Icons.account_circle_outlined),
+                onPressed: () {},
+              ),
+            ],
+            centerTitle: true,
+          ),
+          colDivider,
+          AppBar(
+            title: const Text('Small'),
+            leading: const BackButton(),
+            actions: actions,
+            centerTitle: false,
+          ),
+          colDivider,
+          SizedBox(
+            height: 100,
+            child: CustomScrollView(
+              slivers: [
+                SliverAppBar.medium(
+                  title: const Text('Medium'),
+                  leading: const BackButton(),
+                  actions: actions,
+                ),
+                const SliverFillRemaining(),
+              ],
+            ),
+          ),
+          colDivider,
+          SizedBox(
+            height: 130,
+            child: CustomScrollView(
+              slivers: [
+                SliverAppBar.large(
+                  title: const Text('Large'),
+                  leading: const BackButton(),
+                  actions: actions,
+                ),
+                const SliverFillRemaining(),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
 }
 
-class _DropdownMenusState extends State<DropdownMenus> {
+class Menus extends StatefulWidget {
+  const Menus({super.key});
+
+  @override
+  State<Menus> createState() => _MenusState();
+}
+
+class _MenusState extends State<Menus> {
   final TextEditingController colorController = TextEditingController();
   final TextEditingController iconController = TextEditingController();
   IconLabel? selectedIcon = IconLabel.smile;
@@ -1727,43 +2062,56 @@ class _DropdownMenusState extends State<DropdownMenus> {
     }
 
     return ComponentDecoration(
-      label: 'Dropdown menus',
-      tooltipMessage: 'Use DropdownMenu<T>',
-      child: Wrap(
-        alignment: WrapAlignment.spaceAround,
-        runAlignment: WrapAlignment.start,
-        crossAxisAlignment: WrapCrossAlignment.center,
-        spacing: smallSpacing,
-        runSpacing: smallSpacing,
+      label: 'Menus',
+      tooltipMessage: 'Use MenuAnchor or DropdownMenu<T>',
+      child: Column(
         children: [
-          DropdownMenu<ColorLabel>(
-            controller: colorController,
-            label: const Text('Color'),
-            enableFilter: true,
-            dropdownMenuEntries: colorEntries,
-            inputDecorationTheme: const InputDecorationTheme(filled: true),
-            onSelected: (color) {
-              setState(() {
-                selectedColor = color;
-              });
-            },
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: const <Widget>[
+              ButtonAnchorExample(),
+              rowDivider,
+              IconButtonAnchorExample(),
+            ],
           ),
-          DropdownMenu<IconLabel>(
-            initialSelection: IconLabel.smile,
-            controller: iconController,
-            leadingIcon: const Icon(Icons.search),
-            label: const Text('Icon'),
-            dropdownMenuEntries: iconEntries,
-            onSelected: (icon) {
-              setState(() {
-                selectedIcon = icon;
-              });
-            },
+          colDivider,
+          Wrap(
+            alignment: WrapAlignment.spaceAround,
+            runAlignment: WrapAlignment.center,
+            crossAxisAlignment: WrapCrossAlignment.center,
+            spacing: smallSpacing,
+            runSpacing: smallSpacing,
+            children: [
+              DropdownMenu<ColorLabel>(
+                controller: colorController,
+                label: const Text('Color'),
+                enableFilter: true,
+                dropdownMenuEntries: colorEntries,
+                inputDecorationTheme: const InputDecorationTheme(filled: true),
+                onSelected: (color) {
+                  setState(() {
+                    selectedColor = color;
+                  });
+                },
+              ),
+              DropdownMenu<IconLabel>(
+                initialSelection: IconLabel.smile,
+                controller: iconController,
+                leadingIcon: const Icon(Icons.search),
+                label: const Text('Icon'),
+                dropdownMenuEntries: iconEntries,
+                onSelected: (icon) {
+                  setState(() {
+                    selectedIcon = icon;
+                  });
+                },
+              ),
+              Icon(
+                selectedIcon?.icon,
+                color: selectedColor?.color ?? Colors.grey.withOpacity(0.5),
+              )
+            ],
           ),
-          Icon(
-            selectedIcon?.icon,
-            color: selectedColor?.color ?? Colors.grey.withOpacity(0.5),
-          )
         ],
       ),
     );