Popups clipped by the window bounds

[kirill-grouchnikov]

Run the example/lib/main.dart and switch toe the "Toolbar" page. Now resize the app window to make it smaller than the default start and click one of the toolbar buttons that shows a popup:

Two issues:

1. The popup is aligned to the left of the window instead of the button
2. The popup is clipped vertically with a bunch of errors shown in log

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#3d45a OVERFLOWING:
  needs compositing
  creator: Column ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Positioned ←
    AnimatedPositioned ← Stack ← MacosWindowScope ← LayoutBuilder ← MacosWindow ←
    PlatformMenuBar#33d25 ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=200.0, h=131.0)
  size: Size(200.0, 131.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: 'package:macos_ui/src/buttons/pulldown_button.dart': Failed assertion: line 254 pos 16: 'menuLimits.top >= 0.0': is not true.

Another exception was thrown: A RenderFlex overflowed by 107 pixels on the bottom.

Another exception was thrown: 'package:macos_ui/src/buttons/pulldown_button.dart': Failed assertion: line 254 pos 16: 'menuLimits.top >= 0.0': is not true.

Another exception was thrown: A RenderFlex overflowed by 107 pixels on the bottom.

Another exception was thrown: A RenderFlex overflowed by 7.0 pixels on the bottom.

Another exception was thrown: 'package:macos_ui/src/buttons/pulldown_button.dart': Failed assertion: line 254 pos 16: 'menuLimits.top >= 0.0': is not true.

Another exception was thrown: A RenderFlex overflowed by 47 pixels on the bottom.

[GroovinChip]

Thanks for filing this, @kirill-grouchnikov. I'm investigating this and the sidebar render overflow isn't related to the incorrectly-aligned MacosPulldownButton - they just happen to coincide in this particular instance.

The render overflow in the Sidebar can be solved by updating MacosWindow to simply not build the Sidebar.bottom if the window is below a certain size. Not really sure why one would want to resize a desktop application below 141 pixels tall, but ¯\(ツ)/¯.

A render overflow in the Sidebar also happens for the Sidebar.top when resizing the window below 81 pixels tall. Again not sure why one would do this, but this can be solved the same way.

An alternative solution to these render overflows would be to utilize the window_manager plugin to force applications not to be resizable to below a certain height, but I'm reluctant to go that route for several reasons. If anyone has any thoughts on other alternative solutions I'm happy to hear them. Until then, I'll publish the changes outlined above in a branch called issue_325 so folks who require their apps to be sized to 141 pixels and below won't throw those errors.

As for the incorrect alignment of the MacosPulldownButton, this happens when the window is resized to about 244 pixels and below. The error that occurs at that point is because of the following assert on line 254 of pulldown_button.dart:

assert(menuLimits.top >= 0.0);

I believe this assert is to ensure that the popup has enough space in the route to be shown properly. I'm not sure what the correct solution to this is. @whiplashoo do you have any thoughts on this?

[whiplashoo]

@GroovinChip Indeed, that's why it happens. Since the window height is not sufficient to display the pulldown menu, it defaults to being shown to (0.0, 0.0), in the top-left corner.

Now, there is no good solution I can think for this. On native macOS apps, the pulldown menus are treated as separate windows; in Flutter, we can't draw outside the current window extent. That's why, when menus appear at the right corner, we opt, against native behavior, to draw it right-aligned to the window's edge:

In Notes:

In macos_ui:

If we could draw outside the window's extent with Flutter or implement the menus as separate windows, we would be able to display the pulldown menu at the same position every time. I haven't checked if there is any progress on this for Flutter desktop apps for a while.

[GroovinChip]

Thanks for confirming this, @whiplashoo.

Yes, unfortunately there has been no discernible progress in the framework that would allow our popups to exceed the bounds of the window. In that light, do you have any thoughts on how we can prevent this incorrect behavior when the window height is so small? The only things I can think of are:

1. Simply not enter the route
2. Force a height constraint on application windows, which I'm reluctant to do.
3. Add a warning in our docs that applications using widgets that show popups should not be sized below the minimum height

Frankly, I think option 3 is the best.