はじめに

Flutterで、下記のようなRenderFlex overflowedエラー」が生じた時の、デバッグ方法と対応法を記載。

RenderFlex overflowedエラーとは何か？

端的にいうと「ウィジェットのサイズが画面範囲を超えたときに起こるエラー」のこと。

Flutterのドキュメントに、最も頻繁に発生するエラーの 1 つとして記載されている。

https://docs.flutter.dev/testing/common-errors

これが発生すると、黄色と黒の縞模様が表示され、アプリ UI のオーバーフロー領域を示す。さらに、デバッグ コンソールにエラー メッセージが表示される。

Dart

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

The overflowing RenderFlex has an orientation of Axis.vertical.
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#09969 relayoutBoundary=up5 OVERFLOWING:
  needs compositing
  creator: Column ← Padding ← Center ← Listener ← _GestureSemantics ← RawGestureDetector ←
    GestureDetector ← DebugContainer ← HomeTab ← DownloadingOverlayWidget ← DeviceShadowListener ←
    KeyedSubtree-[GlobalKey#1b409] ← ⋯
  parentData: offset=Offset(32.0, 32.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=350.0, 0.0<=h<=740.0)
  size: Size(350.0, 740.0)
  direction: vertical
  mainAxisAlignment: spaceBetween
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤

Flex（例えば、ColumnやRow）内の子ウィジェットが親ウィジェットが提供する空間より大きくなった場合に発生する。この問題は、ウィジェットツリーが適切にスペースを管理していないことを示している。

Flutter DevToolsのInspectorを使用して、問題を特定する。

flutter runでアプリを実行すると、実行直後にターミナルで、Dart VM ServiceとFlutter DevToolsのための二つのURLが表示される。

Flutter Inspector（ウィジェットツリーの視覚的分析と修正）に関しては、Dart VMではなく、Flutter Devtoolsが提供しているので、2つ目のURLをクリックする。

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 KazutakaのiPhone is available at: http://127.0.0.1:51945/XXXXXXXXXX/
The Flutter DevTools debugger and profiler on KazutakaのiPhone is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:51945/XXXXXXXXXXX/

左から2つ目の「Flutter Inspector」を開くと、現在のウィジェットツリーの全体像が表示される。

上記のエラーメッセージに表示されたウィジェット（このケースではColumnウィジェット）をクリックして、、、

続きは、こちらで記載しています。