[flutter] Wrap 위젯

아래처럼 Row 위젯을 이용하면 여러 위젯을 가로로 배치시킬 수 있다.

Row(
  children: [
    exContainer(Colors.red),
    exContainer(Colors.orange),
    exContainer(Colors.yellow),
    exContainer(Colors.green),
  ],
)

// 가로, 세로가 100이고, 색을 지정할 수 있는 Container를 정의했다.
Container exContainer(Color color){
  return Container(
    width : 100,
    height : 100,
    color : color
  );
}

 

그러나, 위의 사진처럼 "배치된 위젯들의 총 가로 크기> 화면의 가로 크기" 면 당연히 한 줄에 들어갈 수 없다. 즉, 오버플로우가 발생한다.

 

생각나는 해결책은 두 가지이다.

1. 가로로 스크롤 되게 하기 ---> ListView으로 해결이 가능하다.

2. 다음 줄로 넘겨주기        ---> Wrap으로 해결이 가능하다.

 

 

아래처럼 Row를 Wrap으로만 바꾸어준다면 적용이 가능하다.

Wrap(
  children: [
    exContainer(Colors.red),
    exContainer(Colors.orange),
    exContainer(Colors.yellow),
    exContainer(Colors.green),
  ],
)