Implement Material MenuBar #104673

gspencergoog · 2022-05-26T00:13:36Z

Description

This implements a prototype of MenuBar widgets that can both render a Material menu bar, and speak to a bundled plugin on the engine that will create and manage system generated menu bars on macOS, Windows, and Linux (a.k.a. PlatformMenuBar, submitted already).

This implementation of the MenuBar uses a MenuBarController to manage most of the communication between widgets that need to occur to implement the menu bar. The MenuBar uses a hierarchy of MenuBarItem widgets which extend MenuItem so that they are also useful for configuring a platform provided menu.

For the Material MenuBar, MenuBarItem widgets have an internal _MenuNode assigned by looking for a wrapping _MenuNodeWrapper, and then they register attributes with that node (things like the focus node associated with the button, and the menu builder function for the submenus). The MenuBarItems update their metadata with the MenuBarController when they are rebuilt so that it knows enough to be able to render the correct menu widgets in the overlay. Widgets don't exist unless they are currently visible, but the nodes always exist.

I've tried eliminating it, but there are some cases where dirtying the controller from the widget tree can affect things on the overlay, so those updates have to happen in a post frame callback.

Related Issues

☂️ Menu bars and cascading menus #23600

Tests

Many tests for all of the MenuBar operations and configuration.

Design Doc

https://flutter.dev/go/cascading-menus

examples/api/lib/material/menu_bar/menu_bar.1.dart

examples/api/lib/material/menu_bar/menu_bar.0.dart

gspencergoog · 2022-05-27T16:44:19Z

Looks like I started to implement the tests in menu_bar_theme_test.dart, but didn't actually finish. Don't let that hold up the review, but I'm going to write those and add them.

goderbauer

I have not gotten to the meat of this PR yet (the actual implementation). These are just some nits from getting familiar with the API that this implements.

dev/manual_tests/lib/menu_bar.dart

packages/flutter/lib/src/material/menu_bar.dart

goderbauer

not a full review, will continue next week

packages/flutter/lib/src/material/menu_bar.dart

goderbauer · 2022-05-27T22:12:21Z

packages/flutter/lib/src/material/menu_bar.dart

+
+  /// The background color of the menu bar.
+  ///
+  /// Defaults to [MenuBarThemeData.barBackgroundColor] if not set.


(here and elsewhere) Do we usually document what this defaults to when nothing is set in the theme?

Yes, we seem to, at least sometimes. In this case, I thought it was a good idea, since the properties have different names, and you might not know which background color it corresponds to.

Oh, I meant do we usually document what default color is used if backgroundColor and MenuBarThemeData.barBackgroundColor is not set?

I don't know. Should we document it here, or on the theme? On the theme it seems weird, since there isn't really a default there (other than null), so I'm not sure how I would clearly indicate that the default theme for MenuBar has some value for it.

@HansMuller What do you think?

Defaults should be defined and documented by component widgets, not by themes. The default value for all theme properties and for all component widget properties should be null and the implementation should compute the default as needed with something like:

Foo effectiveFoo = widget.foo ?? theme.foo ?? _defaultTheme.foo!;

OK. That's how they are implemented. I'll adjust the documentation to show the values from the default theme.

How have we worded that in the past? For example, is it something like this? "If unset, uses the [MenuBarTheme] value, if that is unset, defaults to XX" or do we just say "If unset, defaults to XX"?

We always use "If null, uses the [MenuBarTheme] value, if that is null, defaults to XX". Saying "unset" isn't quite right. It gets a little more complex for state dependent properties (MaterialStateProperty values) because it's also necessary to explain what states the property is resolved against.

packages/flutter/lib/src/material/menu_bar.dart

goderbauer · 2022-05-31T21:29:14Z

packages/flutter/lib/src/material/menu_bar.dart

+
+  /// The background color of the menu bar.
+  ///
+  /// Defaults to [MenuBarThemeData.barBackgroundColor] if not set.


Oh, I meant do we usually document what default color is used if backgroundColor and MenuBarThemeData.barBackgroundColor is not set?

goderbauer · 2022-06-01T16:45:15Z

packages/flutter/lib/src/material/menu_bar.dart

+    if (openMenu?.topLevel != null) {
+      if (_overlayEntry == null) {
+        _overlayEntry = OverlayEntry(builder: (BuildContext context) => _MenuStack(this));
+        Navigator.of(menuBarContext).overlay!.insert(_overlayEntry!);


Incidentally, why isn't that called Overlay.maybeOf?

Looks like we missed this one when we cleaned up the other of/maybeOf's.

packages/flutter/lib/src/material/menu_bar.dart

goderbauer · 2022-06-01T17:07:28Z

(There's a lot of unhappiness with the checks)

packages/flutter/lib/src/material/menu_bar.dart

goderbauer · 2022-06-01T22:30:33Z

packages/flutter/lib/src/material/menu_bar.dart

+/// adopts a height large enough to accommodate all the children.
+///
+/// It is used by [MenuBarMenu] to render its child items.
+class _MenuBarMenuList extends StatefulWidget {


note for myself: reviewed upto here.

packages/flutter/lib/src/material/menu_bar.dart

HansMuller

Just looked at the first example, getting my feet wet.

HansMuller · 2022-06-04T01:00:36Z

examples/api/lib/material/menu_bar/menu_bar.0.dart

+      case MenuSelection.hideMessage:
+        showingMessage = false;
+        break;
+      case MenuSelection.quit:


We may want to think carefully about how desktop applications should "quit". Most toolkits provide some support for orderly shutdown, including bugging the user about unsaved changes etc. What if we left this aspect of the demo out - users could still just close the window.

Okay, I added this so that it would be similar to the platform menu example, which uses the Apple-defined quit menu.

On mobile, popping the last route will exit the app, but doesn't appear to on desktop (we should fix that).

HansMuller · 2022-06-04T01:06:38Z

examples/api/lib/material/menu_bar/menu_bar.0.dart

+            MenuBarMenu(
+              autofocus: true,
+              label: 'Menu App',
+              menus: <MenuBarItem>[


I've found it a little odd that the value of "menus" is a list of MenuBar_Items_. Maybe "items" would be better? For menu bars that aren't native, it seems like apps might want to include other widgets (buttons, dividers, labels) rather than just menus.

It has to be that way so that I can traverse the hierarchy and collect the shortcuts that need to be handled even if the widget doesn't exist. I plan on creating a CustomMenuBarItem that takes a builder so you can draw whatever you want, but it handles the shortcut and activation functionality.

I didn't put it into this PR because it was already too huge.

HansMuller · 2022-06-04T01:10:00Z

examples/api/lib/material/menu_bar/menu_bar.0.dart

+              autofocus: true,
+              label: 'Menu App',
+              menus: <MenuBarItem>[
+                MenuBarButton(


We need to find a way to unify this with Tab, NavigationDestination, NavigationRailDestination, PopupMenuItem, etc.

Unify in what way? Make them all be/wrap the same class?

HansMuller · 2022-06-04T01:10:51Z

examples/api/lib/material/menu_bar/menu_bar.0.dart

+                  label: MenuSelection.about.label,
+                  onSelected: () => _activate(MenuSelection.about),
+                ),
+                MenuBarButton(


It would be helpful to demo a MenuBarButton that could be disabled.

HansMuller · 2022-06-04T01:12:14Z

examples/api/lib/material/menu_bar/menu_bar.0.dart

+                        label: MenuSelection.colorRed.label,
+                        shortcut: const SingleActivator(LogicalKeyboardKey.keyR, control: true),
+                      ),
+                      MenuBarButton(


What about menu item mnemonics?

They are not yet implemented. There are localized, adaptive, shortcut labels derived from the shortcut, however.

HansMuller · 2022-06-04T01:16:00Z

packages/flutter/lib/src/material/menu_bar.dart

+
+  /// The background color of the menu bar.
+  ///
+  /// Defaults to [MenuBarThemeData.barBackgroundColor] if not set.


We always use "If null, uses the [MenuBarTheme] value, if that is null, defaults to XX". Saying "unset" isn't quite right. It gets a little more complex for state dependent properties (MaterialStateProperty values) because it's also necessary to explain what states the property is resolved against.

HansMuller

I'm still in the middle of all of this.

Please imagine that I'd prefaced each comment with "In Hans's humble opinion".

I still haven't ready all of the code and I'm continuing to have trouble unifying this whole thing with the need for cascading menus in general, outside of menu bars.

HansMuller · 2022-06-07T19:41:22Z

examples/api/lib/material/menu_bar/menu_bar.1.dart

+    // select whether we want Ctrl or Meta for the modifier key on our
+    // shortcuts.
+    final bool isAppleOS;
+    switch (defaultTargetPlatform) {


This should probably be a static utility method somewhere. It's likely to be very common in portable desktop apps.

I don't know.. We already have Platform and defaultTargetPlatform available. I don't think adding isAppleOS as a static clears things up much.

I could also use Platform.isMacOS || Platform.isIOS instead, but that's less testable.

HansMuller · 2022-06-07T19:43:50Z

examples/api/lib/material/menu_bar/menu_bar.1.dart

+                  members: <MenuBarItem>[
+                    MenuBarButton(
+                      label: MenuSelection.open.label,
+                      shortcut: SingleActivator(


It would be nice if SingleActivator provided a constructor parameter that meant "choose meta if iOS and macOS, control otherwise". CC @dkwingsmt

Yeah the problem has been raised in #83733 (comment). I once attempted to draft a design doc but realized there are more things we might want to cover than to swap just Ctrl and Cmd, so I didn't proceed.

If the design was open-ended, a sort-of shortcut "localization, maybe we could provide the feature and then extend its scope later.

HansMuller · 2022-06-07T19:55:19Z

examples/api/test/material/menu_bar/menu_bar.1_test.dart

+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Menu contains the right things', (WidgetTester tester) async {


Testing the menu items and shortcuts would be easy if you updated the value of a Text widget in _onSelected(). Probably more useful than debugPrint for an example too.

Good idea! Done, and for the other example too.

HansMuller · 2022-06-13T23:12:35Z

packages/flutter/lib/src/material/menu_bar_theme.dart

+import 'menu_bar.dart';
+import 'theme.dart';
+
+/// Defines the visual properties of [MenuBar], [MenuBarMenu] and


This theme includes some properties that are specific to menu bars, but it seems to mostly be about menus. Maybe what we really need is MenuTheme with a few menu bar properties? Or maybe I've misunderstood what this theme is for; however I don't see a separate menu theme.

We need to explain how this theme relates to PopupMenus and PopupMenuTheme. Surely they're not completely different animals?

I'm fine with calling this MenuTheme. Just didn't want to overstep my mandate. :-)

HansMuller · 2022-06-13T23:14:21Z

packages/flutter/lib/src/material/menu_bar_theme.dart

+///
+/// See also:
+///
+///  * [ThemeData], which describes the overall theme information for the


theme information => theme

HansMuller · 2022-06-13T23:35:23Z

packages/flutter/lib/src/material/menu_bar_theme.dart

+    if (other.runtimeType != runtimeType) {
+      return false;
+    }
+    return other is MenuBarThemeData &&


Conventional formatting for this kind of thing is like:

return other is ChipThemeData && other.backgroundColor == backgroundColor && other.deleteIconColor == deleteIconColor ...

Yeah, I know. Once the changes settle down a bit I'll make a formatting pass to normalize the formatting before submitting.

HansMuller · 2022-06-13T23:48:42Z

packages/flutter/lib/src/material/menu_bar.dart

+
+/// A menu bar with cascading child menus.
+///
+/// This is a Material Design menu bar that resides above the main body of an


Can't it really go anywhere at all? Maybe replace "that resides" with "that typically resides".

Actually, now it can. The comment is just out of date.

HansMuller · 2022-06-13T23:49:37Z

packages/flutter/lib/src/material/menu_bar.dart

+///
+/// This is a Material Design menu bar that resides above the main body of an
+/// application that defines a menu system for invoking callbacks or firing
+/// [Intent]s in response to user selection of the menu item.


of the menu item => of a menu item

HansMuller · 2022-06-13T23:50:06Z

packages/flutter/lib/src/material/menu_bar.dart

+/// application that defines a menu system for invoking callbacks or firing
+/// [Intent]s in response to user selection of the menu item.
+///
+/// The menu can be navigated by the user using the arrow keys, and can be


the user using the arrow keys => by using the arrow keys. It can be

HansMuller · 2022-06-13T23:51:14Z

packages/flutter/lib/src/material/menu_bar.dart

+/// Menu items can have a [SingleActivator] or [CharacterActivator] assigned to
+/// them as their [MenuBarButton.shortcut], so that if the shortcut key sequence
+/// is pressed, the menu item corresponding to that shortcut will be selected
+/// even if the menu is closed. Shortcuts must be unique in the ambient


the menu => its menu

…erarchies

bernaferrari · 2022-07-15T16:42:45Z

packages/flutter/lib/src/material/menu_bar.dart

+    final double horizontalPadding = math.max(
+      _kLabelItemMinSpacing,
+      _kLabelItemDefaultSpacing + density.horizontal * 2,
+    );


I'm not a fan of this, would it be possible to customize it? Different people might do horizontalPadding differently on different platforms, and having the visualDensity there adds some "randomness" that's not easy for users to "fix" if they don't like it. Since it is used for everything, I think it is too important to not be user configurable.

You can set the density to a fixed value, so it's not really "random", but I know what you mean. Sure, I'll see if I can find a good way to make it configurable.

gspencergoog · 2022-08-08T21:30:46Z

Closing in favor of #109179

gspencergoog requested review from goderbauer and HansMuller May 26, 2022 00:13

bernaferrari reviewed May 26, 2022

View reviewed changes

examples/api/lib/material/menu_bar/menu_bar.1.dart Outdated Show resolved Hide resolved

gspencergoog force-pushed the menu_bar branch 2 times, most recently from 0f98c3e to 79b2cf3 Compare May 26, 2022 23:02

bernaferrari reviewed May 26, 2022

View reviewed changes

examples/api/lib/material/menu_bar/menu_bar.0.dart Outdated Show resolved Hide resolved

gspencergoog force-pushed the menu_bar branch 2 times, most recently from aa06ab1 to 53bd65f Compare May 27, 2022 16:31

goderbauer reviewed May 27, 2022

View reviewed changes

gspencergoog force-pushed the menu_bar branch from 78c6d5d to a7a0ed0 Compare May 27, 2022 22:38

goderbauer reviewed May 27, 2022

View reviewed changes

gspencergoog force-pushed the menu_bar branch from 7e65b56 to 203faaf Compare May 31, 2022 16:58

goderbauer reviewed May 31, 2022

View reviewed changes

goderbauer reviewed Jun 1, 2022

View reviewed changes

gspencergoog force-pushed the menu_bar branch 2 times, most recently from ee2054e to 0c93cc5 Compare June 2, 2022 02:07

goderbauer reviewed Jun 2, 2022

View reviewed changes

gspencergoog force-pushed the menu_bar branch 2 times, most recently from fad9b30 to 4ea6afb Compare June 3, 2022 00:22

HansMuller reviewed Jun 4, 2022

View reviewed changes

HansMuller reviewed Jun 13, 2022

View reviewed changes

gspencergoog force-pushed the menu_bar branch from f977b08 to ccb0712 Compare June 14, 2022 15:26

gspencergoog added 17 commits June 27, 2022 09:06

Remove update serial, and fix controller attachment.

9997292

Fix tab traversal

01301b5

Fix menu location in the presence of padding, add tests

68ea93f

Add padding tests for overlay too

a2aaedd

Updated some docs

f7d0c38

Fix indexing around groups

d3ebdca

Hans Review Changes 1

a20369b

Rename MenuBarTheme to MenuTheme

d0c37f9

Hans Review Changes 2

64557a5

Remove MenuBar.adaptive, separate MenuBar and PlatformMenuBar type hi…

5aff54f

…erarchies

Get rid of MenuBarItem layer of type hierarchy

558c60d

Remove click ban

c11df5b

Add FlutterError for creating menu items outside of a menu controller

c16525d

Fix docs issues, rebase

7587fe4

Refactored to pull out a _MenuManager for use in other widgets

3fb277c

Fix startup issues, some tests

b811baa

Fix tests

0d9fa1f

gspencergoog force-pushed the menu_bar branch from b666cc3 to 0d9fa1f Compare June 27, 2022 20:59

gspencergoog added 3 commits June 27, 2022 14:48

Make group expansion recursive

6f8eec3

Make MenuBarController hold a manager

6c7ec26

checkpoint

624a40d

gspencergoog force-pushed the menu_bar branch from 5b15db6 to 624a40d Compare June 28, 2022 01:11

This was referenced Jul 13, 2022

☂️ Menu bars and cascading menus #23600

Closed

Make PopupMenuButton offer a way to place the menu relative to the size of the menu button #101902

Closed

bernaferrari reviewed Jul 15, 2022

View reviewed changes

gspencergoog closed this Aug 8, 2022

gspencergoog mentioned this pull request Sep 23, 2022

Implement Material MenuBar and MenuAnchor #112239

Merged

flutter-dashboard bot added a: tests "flutter test", flutter_test, or one of our tests f: focus Focus traversal, gaining or losing focus labels Oct 7, 2022

Implement Material MenuBar #104673

Implement Material MenuBar #104673

Uh oh!

Conversation

gspencergoog commented May 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Tests

Design Doc

Uh oh!

Uh oh!

Uh oh!

gspencergoog commented May 27, 2022

Uh oh!

goderbauer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

goderbauer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

goderbauer commented Jun 1, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gspencergoog commented May 26, 2022 •

edited

Loading