-
Notifications
You must be signed in to change notification settings - Fork 7.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
material_3_demo
experimental renderflex overflows
#1570
Labels
Comments
Hi! I think |
I can reproduce this on my monitor (probably 22.9"). Steps to reproduce
Screen.Recording.2023-03-10.at.10.19.34.movlogstahatesser@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. |
TahaTesser
changed the title
material_3_demo experimental renderflex overflows on small screen
material_3_demo experimental renderflex overflows
Mar 10, 2023
guidezpl
changed the title
material_3_demo experimental renderflex overflows
Feb 19, 2024
material_3_demo
experimental renderflex overflows
I'm closing this issue as experimental demo 3 has been removed in the samples repo. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: