flutter / samples

A collection of Flutter examples and demos
https://flutter.github.io/samples/
Other
17.12k stars 7.5k forks source link

`material_3_demo` experimental renderflex overflows #1570

Closed fredgrott closed 2 months ago

fredgrott commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

https://user-images.githubusercontent.com/48603081/224263163-55ee89a4-a3ba-4eae-83ca-24228d59f6e3.mov

logs ```console 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. ```
QuncCccccc commented 2 months ago

I'm closing this issue as experimental demo 3 has been removed in the samples repo.