Flutter底部溢出

最近在学习Flutter开发,真的是一路踩坑过来的。这里记录自己的踩坑之路,以备以后再遇到此类问题,同时希望能够帮助到其他正在学习的童鞋们。
这次的异常是手机屏幕底部有黄线,并且提示“A RenderFlex overflowed by 3.8 pixels on the bottom.”。
IDE用的是VS code,具体异常如下:

1 2I/flutter (19319): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ 3I/flutter (19319): The following message was thrown during layout: 4I/flutter (19319): A RenderFlex overflowed by 3.8 pixels on the bottom. 5I/flutter (19319): 6I/flutter (19319): The overflowing RenderFlex has an orientation of Axis.vertical. 7I/flutter (19319): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and 8I/flutter (19319): black striped pattern. This is usually caused by the contents being too big for the RenderFlex. 9I/flutter (19319): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the 10I/flutter (19319): RenderFlex to fit within the available space instead of being sized to their natural size. 11I/flutter (19319): This is considered an error condition because it indicates that there is content that cannot be 12I/flutter (19319): seen. If the content is legitimately bigger than the available space, consider clipping it with a 13I/flutter (19319): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, 14I/flutter (19319): like a ListView. 15I/flutter (19319): The specific RenderFlex in question is: 16I/flutter (19319): RenderFlex#5e2be relayoutBoundary=up18 OVERFLOWING 17I/flutter (19319): creator: Column ← ConstrainedBox ← Padding ← Container ← Recommend ← Column ← _SingleChildViewport 18I/flutter (19319): ← IgnorePointer-[GlobalKey#05573] ← Semantics ← Listener ← _GestureSemantics ← 19I/flutter (19319): RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#6ee6a] ← ⋯ 20I/flutter (19319): parentData: <none> (can use size) 21I/flutter (19319): constraints: BoxConstraints(0.0<=w<=392.7, h=198.9) 22I/flutter (19319): size: Size(392.7, 198.9) 23I/flutter (19319): direction: vertical 24I/flutter (19319): mainAxisAlignment: start 25I/flutter (19319): mainAxisSize: max 26I/flutter (19319): crossAxisAlignment: center 27I/flutter (19319): verticalDirection: down 28I/flutter (19319): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ 29◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ 30I/flutter (19319): ════════════════════════════════════════════════════════════════════════════════════════════════════ 31 32

我从网上看了一下别人的方法,说是放到SingleChildScrollView()组件中,然后做了相应的修改,修改后的具体代码如下:

在外层添加SingleChildScrollView
但是错误依然没有解决,后来发现是padding的问题:
padding里的参数问题
修改padding: EdgeInsets.fromLTRB(10.0,2.0,0,5.0)里的最后一个参数为(4.0),如上图所示,问题成功解决。黄色底边消失,达到预期显示效果。

代码交流 2021