A RenderFlex overflowed by pixels の原因と解決策

概要

A RenderFlex overflowed by X pixels は、FlutterでRow、Column、Flexなどのウィジェットの子要素が親のサイズを超えた場合に発生するレイアウトエラーです。

エラーメッセージ

A RenderFlex overflowed by 42 pixels on the right.

A RenderFlex overflowed by 100 pixels on the bottom.

The overflowing RenderFlex has an orientation of Axis.horizontal.

原因

1. テキストが長すぎる

1
2
3
4
5
Row(
  children: [
    Text('This is a very long text that will overflow...'),
  ],
)

2. 固定幅ウィジェットがはみ出す

1
2
3
4
5
6
7
Row(
  children: [
    Container(width: 200),
    Container(width: 200),
    Container(width: 200), // 画面幅を超える
  ],
)

3. Columnで高さが足りない

1
2
3
4
5
6
7
Column(
  children: [
    Container(height: 400),
    Container(height: 400),
    Container(height: 400), // 画面高さを超える
  ],
)

解決策

1. Expandedでフレキシブルに

1
2
3
4
5
6
7
Row(
  children: [
    Expanded(
      child: Text('This is a very long text...'),
    ),
  ],
)

2. Flexibleを使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
Row(
  children: [
    Flexible(
      child: Text(
        'Long text here...',
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
)

3. SingleChildScrollViewでスクロール可能に

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Container(width: 200),
      Container(width: 200),
      Container(width: 200),
    ],
  ),
)

4. ListViewを使用（垂直方向）

1
2
3
4
5
6
7
ListView(
  children: [
    Container(height: 400),
    Container(height: 400),
    Container(height: 400),
  ],
)

5. Wrapでラップ

1
2
3
4
5
6
7
Wrap(
  children: [
    Container(width: 200),
    Container(width: 200),
    Container(width: 200), // 自動的に次の行へ
  ],
)

6. MediaQueryで画面サイズを取得

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;

  return Row(
    children: [
      Container(width: screenWidth / 3),
      Container(width: screenWidth / 3),
      Container(width: screenWidth / 3),
    ],
  );
}

7. LayoutBuilderで制約を取得

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
LayoutBuilder(
  builder: (context, constraints) {
    return Row(
      children: [
        Container(width: constraints.maxWidth / 2),
        Container(width: constraints.maxWidth / 2),
      ],
    );
  },
)

デバッグ方法

1
2
3
4
5
// デバッグモードでオーバーフローを可視化
// （黄色と黒のストライプが表示される）

// Flutter DevToolsの Layout Explorer を使用して
// ウィジェットツリーを確認

A RenderFlex overflowed by pixels

概要

エラーメッセージ

原因

1. テキストが長すぎる

2. 固定幅ウィジェットがはみ出す

3. Columnで高さが足りない

解決策

1. Expandedでフレキシブルに

2. Flexibleを使用

3. SingleChildScrollViewでスクロール可能に

4. ListViewを使用（垂直方向）

5. Wrapでラップ

6. MediaQueryで画面サイズを取得

7. LayoutBuilderで制約を取得

デバッグ方法

関連エラー

関連エラー