Flutter에서 자주 만나는 쉬운 에러와 해결법: "A RenderFlex overflowed by XX pixels"

Flutter를 처음 시작할 때 초보 개발자들이 자주 마주치는 에러 중 하나가 바로 "A RenderFlex overflowed by XX pixels" 에러입니다. 이 글에서는 이 에러의 원인과 해결 방법을 쉽게 설명합니다.

에러 메시지의 의미와 원인

이 에러는 주로 Row나 Column 위젯을 사용할 때, 안에 들어가는 위젯들의 크기가 부모 위젯의 크기를 초과할 때 발생합니다. 예를 들어, 한 화면에 너무 많은 위젯을 넣거나, 각 위젯의 크기를 고정해버리면 화면을 벗어나서 빨간색 에러 박스가 나타납니다.

"You have filled the application screen with so many things that it has now overflowed and ‘overflowed’ off the edge of the screen! ... This can happen, for example, when you put too many elements in a Row or Column widget."

대표적인 잘못된 코드 예시

 

dart

Row( children: [ Container(width: 200, height: 100, color: Colors.red), Container(width: 200, height: 100, color: Colors.green), Container(width: 200, height: 100, color: Colors.blue), ], )

만약 부모 위젯의 가로 크기가 600보다 작다면, 위 코드는 overflow 에러를 발생시킵니다.

해결 방법

아래와 같은 방법으로 에러를 해결할 수 있습니다.

• SingleChildScrollView로 감싸기
  화면을 스크롤 가능하게 만들어, 내용이 넘칠 때 스크롤로 볼 수 있게 합니다.
•  

  dart

  SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: [...], ), )
• Expanded 또는 Flexible 사용하기
  각 위젯이 남은 공간만큼만 차지하도록 만들어줍니다.
•  

  dart

  Row( children: [ Expanded(child: Container(height: 100, color: Colors.red)), Expanded(child: Container(height: 100, color: Colors.green)), Expanded(child: Container(height: 100, color: Colors.blue)), ], )
• 위젯 크기 조정
  각 위젯의 크기를 부모의 크기에 맞게 조정합니다.

"make the page scrollable using SingleChildScrollView ... Or you can wrap that multi-item area with Expanded or Flexible and let the widgets adjust themselves according to the size of the screen."

추가 팁: 비슷한 에러 예방을 위한 습관

• 레이아웃 설계 시 항상 부모 위젯의 크기를 고려하세요.
• Expanded, Flexible 활용에 익숙해지세요.
• 위젯이 화면을 벗어날 수 있는 상황에서는 스크롤을 적극적으로 활용하세요.

마무리

Flutter에서 "A RenderFlex overflowed by XX pixels" 에러는 초보자라면 한 번쯤 꼭 마주치는 에러입니다. 위에서 설명한 방법대로 레이아웃을 설계하면, 이런 에러를 쉽게 예방하고 해결할 수 있습니다. 앞으로도 에러 메시지를 잘 읽고, 원인을 파악하는 습관을 들이면 Flutter 개발이 훨씬 쉬워질 것입니다!

참고

• [The 10 Most Common Errors and Solutions in Flutter - Stackademic]

Flutter 에러 해결 시리즈는 계속됩니다. 궁금한 에러가 있다면 댓글로 남겨주세요!