material_3_demo experimental renderflex overflows

[fredgrott]

Getting renderFlex overflow errors on small screens.

mainAxisSize: MainAxisSize.min not applied on Rows and Text items not wrapped via Flexible widget. Affected classes are:

ComponentDecoration
SwitchRow
Radios
FloatingActionButtons
CheckboxRow

Once those things are added the renderflex overflows no longer occur.

[QuncCccccc]

Hi! I think mainAxisSize: MainAxisSize.min might affect the layout of the components, right? I'm trying to reproduce the issue. Which device do you use to test the app? Thanks!

[TahaTesser]

I can reproduce this on my monitor (probably 22.9").

Steps to reproduce

1. Run the experimental demo https://github.com/flutter/samples/tree/main/experimental/material_3_demo
2. Double tap the window to maximize

Screen.Recording.2023-03-10.at.10.19.34.mov

logs

tahatesser@Tahas-MacBook-Pro material_3_demo % fr -d macos
Launching lib/main.dart on macOS in debug mode...
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:macOS, arch:arm64, id:00008103-001634E00ED3001E }
{ platform:macOS, arch:x86_64, id:00008103-001634E00ED3001E }
Building macOS application...                                           
2023-03-10 10:19:03.432 material_3_demo[3374:43364] NSApp should be of type FlutterApplication, not NSApplication.
System requests for the application to terminate will not be sent to the Flutter framework, so the framework will be unable to cancel those requests.
Modify the application's NSPrincipleClass to be FlutterApplication in the Info.plist to fix this.
Syncing files to device macOS...                                    67ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

A Dart VM Service on macOS is available at: http://127.0.0.1:49805/eoByzN1SdqU=/
The Flutter DevTools debugger and profiler on macOS is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:49805/eoByzN1SdqU=/

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

The relevant error-causing widget was:
  Row
  Row:file:///Users/tahatesser/Projects/samples/experimental/material_3_demo/lib
  /component_screen.dart:2211:13

To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A49805%2FeoByzN1Sd
qU%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#a4975 relayoutBoundary=up17
OVERFLOWING:
  creator: Row ← Column ← Padding ← RepaintBoundary ← ComponentDecoration ←
  BottomAppBars ← Column ←
    Center ← Padding ← Semantics ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
    ⋯
  parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
  constraints: BoxConstraints(0.0<=w<=36.7, 0.0<=h<=Infinity)
  size: Size(36.7, 20.0)
  direction: horizontal
  mainAxisAlignment: center
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════
════════════════════

Another exception was thrown: A RenderFlex overflowed by 89 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 114 pixels on the
right.
Another exception was thrown: A RenderFlex overflowed by 88 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 22 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 78 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 29 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 101 pixels on the
right.
Another exception was thrown: A RenderFlex overflowed by 61 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 50 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 59 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 53 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 77 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 64 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 52 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 98 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 98 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 90 pixels on the right.