<TIL> 플러터: overflowed by x.x pixels

 

🧭

 

OVERFLOWED BY x.x PIXELS

플러터로 개발중에 화면을 초과하는 에러를 종종 마주하게 됩니다.

오늘은 2번이나 해당 경우를 마주했기 때문에 TIL로 기록해 둡니다.

SafeArea

첫번째 경우는 SafeArea로 Scaffold 전체를 감싸지 않고, Scaffold 내 body만 SafeArea로 감싸서 하단 네브바가 overflow 하는 에러가 발생했습니다.

SafeArea를 사용하는 경우 당장 차일드 위젯이 하나 뿐이더라도 최상단에서 감싸도록 해야 겠습니다.

overflowed by 1.0 pixel

두번째로 divider 위젯의 두께로 인해 1 pixel을 초과하였습니다.

에러가 발생한 곳은 네모 박스 안에서 텍스트 위젯과 디바이더, 그리고 텍스트 위젯까지 총 3개의 위젯이 컬럼 위젯의 children으로 들어가 있었습니다.

column을 감싸는 Container에 위아래 padding 값을 주고 가운데 정렬을 시켰는데, 앞으로는 padding 값이 아니라 MainAxisAlignment를 Center로 해서 처리해야 겠습니다.