[Flutter] A RenderFlex overflowed by 58 pixels on the right

Row에 Icon들을 넣는 과정에서 A RenderFlex overflowed by 58 pixels on the right 메세지가 떴다.

Icon이 화면 범위를 넘어서면 Icon을 유연하게 아래로 이동시키는 방법은 없는지 구글링해보았다.

SafeArea를 써보고, Expanded도 써보고, Flexible을 써보고 이런저런 방식을 적용해보다가 Wrap이라는 Widget을 발견했다!

 

변경 이전 화면

Container(
  child: Wrap(
    children: [
    	...
    ],
  ),
),

Container로 감싸고 child로 Wrap 위젯을 Row대신 넣어주었더니, 아래와 같이 만족스러운 결과를 얻었다.

변경 이후 화면

Flutter Widget Video: youtu.be/z5iw2SeFx2M