🐛 PaneItem overflows when transitioning from compact to open

[harlanx]

Similar issue to #588 has resurfaced on the latest update.

To Reproduce
Steps to reproduce the behavior:

1. Use fluent package example app
2. Provide a widget for infoBadge parameter on a PaneItem
3. Set displayMode of NavigationPane to PaneDisplayMode.auto
4. flutter run --debug -d windows
5. Resize window width by mouse
6. See error

Additional context

Debug

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 22 pixels on the right.

The relevant error-causing widget was:
  Row
  Row:file:///D:/Documents/Projects/Dart/fluent_ui/lib/src/controls/navigation/navigation_view/pane_items.dart:244:24

To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9102/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A58791%2FO1HH0isi4Lw%3D%2F&inspectorRef=inspector-0

The overflowing RenderFlex has an orientation of Axis.horizontal.
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#cac0b relayoutBoundary=up39 OVERFLOWING:
  creator: Row ← ConstrainedBox-[GlobalKey#dbc72 NavigationPaneItem key; PaneItem] ← Stack ←
    FocusBorder ← Padding ← DecoratedBox ← Padding ← Container ← Semantics ← Listener ←
    _GestureSemantics ← RawGestureDetector ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=38.0, 40.0<=h<=Infinity)
  size: Size(38.0, 40.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

[bdlukaa]

@harlanx can you try the latest master and see if the issue goes away?

dependencies:
  fluent_ui:
    git:
      url: https://github.com/bdlukaa/fluent_ui.git

[harlanx]

I'm still getting an error on my project using master even without infoBar or trailing provided. I don't know why its being painted during transition even though there are null checks.

Debug (My Project)

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 4.0 pixels on the right.

The relevant error-causing widget was:
  Row
  Row:file:///C:/Users/Arctic%20Snow/AppData/Local/Pub/Cache/git/fluent_ui-f14c46484cf102942638708653c1129ce10b680e/lib/src/controls/navigation/navigation_view/pane_items.
  dart:248:24

To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9102/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A54919%2FSp_n4joIKLQ%3D%2F&inspectorRef=inspector-0

The overflowing RenderFlex has an orientation of Axis.horizontal.
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#b3784 relayoutBoundary=up40 OVERFLOWING:
  creator: Row ← ConstrainedBox-[GlobalKey#1a771 NavigationPaneItem key; PaneItem] ← Stack ←
    FocusBorder ← Padding ← DecoratedBox ← Padding ← Container ← Semantics ← Listener ←
    _GestureSemantics ← RawGestureDetector ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=38.0, 40.0<=h<=Infinity)
  size: Size(38.0, 40.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

I've downloaded a local copy of the package and modified the returned widget for PaneDisplayMode.open in pane_items.dart which seems to fix the issue for me. This allows those trailing widgets to be painted even during transition. I don't know if there would be potential issues with this solution though since I've only used basic widgets on infoBar and trailing during my testing.

Code changes

            case PaneDisplayMode.open:
              return ConstrainedBox(
                key: itemKey,
                constraints: const BoxConstraints(
                  minHeight: kPaneItemMinHeight,
                ),
                child: Row(children: [
                  Padding(
                    padding: theme.iconPadding ?? EdgeInsets.zero,
                    child: IconTheme.merge(
                      data: iconThemeData,
                      child: Center(child: icon),
                    ),
                  ),
                  Expanded(child: textResult),
                  Flexible(
                    child: Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          if (infoBadge != null)
                            Flexible(
                              child: IntrinsicWidth(
                                child: Padding(
                                  padding: const EdgeInsetsDirectional.only(
                                      end: 8.0),
                                  child: infoBadge!,
                                ),
                              ),
                            ),
                          if (trailing != null)
                            Flexible(
                              child: IntrinsicWidth(
                                child: IconTheme.merge(
                                  data: const IconThemeData(size: 16.0),
                                  child: trailing!,
                                ),
                              ),
                            ),
                        ],
                      ),
                    ),
                  ),
                ]),
              );

[harlanx]

Just an update on this. Turns out that all of the non-Flexible items in the row for PaneDisplayMode.open is causing this issue.

[harlanx]

I've come up with a new solution, probably better that the first one I suggested.
The 12pixels being subtracted is from

fluent_ui/lib/src/controls/navigation/navigation_view/pane_items.dart

Line 308 in f14c464

margin: const EdgeInsets.symmetric(horizontal: 6.0),

@bdlukaa can you take a look? If you have another solution in mind, let's go your way since I'm not familiarized with the package.

            case PaneDisplayMode.open:
              return IntrinsicHeight(
                child: ConstrainedBox(
                  key: itemKey,
                  constraints: const BoxConstraints(
                    minHeight: kPaneItemMinHeight,
                  ),
                  child: OverflowBox(
                    maxWidth: (maybeBody?.pane?.size?.openMaxWidth ??
                            kOpenNavigationPaneWidth) -
                        12.0,
                    child: Row(children: [
                      Padding(
                        padding: theme.iconPadding ?? EdgeInsets.zero,
                        child: IconTheme.merge(
                          data: iconThemeData,
                          child: Center(child: icon),
                        ),
                      ),
                      Expanded(child: textResult),
                      if (infoBadge != null)
                        Padding(
                          padding: const EdgeInsetsDirectional.only(end: 8.0),
                          child: infoBadge!,
                        ),
                      if (trailing != null)
                        IconTheme.merge(
                          data: const IconThemeData(size: 16.0),
                          child: trailing!,
                        ),
                    ]),
                  ),
                ),
              );

[bdlukaa]

I would rather not make use of intrinsic widgets on this widget. Ideally, the solution would be to create a RenderObject for this widget, but I do not have the time to invest into it :/

Locally, I don't have any issues when hiding the infoBadge and trailing widgets while transitioning

[harlanx]

Desktop.2023.08.04.mp4

It is reproduceable in the example app.
In release mode it is hidden so it doesn't bother me that much.

[bdlukaa]

I see. It is fine when using the compact mode and opening the pane from there, but when changing the displayMode property from compact to open, this issue happens.