[Flutter Widget] size를 줄수 있는 위젯과 size를 줄 수 없는 위젯

Flutter내에서 레이아웃을 잡는 위젯으로 보통 Row와 Column을 사용합니다.

 

Row와 column은 동일하게 children으로 자식 요소들을 가질 수 있습니다.

Row위젯을 먼저 살펴보도록 하겠습니다. 

Row는 X축을 기준으로 정렬하며 MainAxisAlignment라는 인자를 사용하여 정렬합니다. 

아래는 spaceBetween을 사용하였고 기기의 전체 사이즈에 맞춰서 공백을 나눠 정렬해줍니다.

코드를 실행하면 UI는 이렇게 그려집니다.

UI에서 맨 오른쪽 위젯이 기기의 남은 사이즈를 전체 다 차지해야 한다면 Expanded나 Flexible 위젯으로 감싸줄 수 있습니다.

Expanded와 Flexible은 남은 공간을 모두 차지한다는 공통점이 있습니다.

두 위젯의 큰 차이점은 Flexble 위젯이 FlexFit 옵션을 통해 설정을 더 디테일하게 줄 수 있다는 점입니다. 

Expanded위젯은 FlexFit옵션이 FlexFit.tight로 고정된 위젯입니다.

Column은 Y축을 기준으로 그려진다는 것만 다르고 나머지는 Row와 동일한 특성을 갖습니다.

Column 내에서 ListView를 사용하게 되면 어떻게 될까요?

사이즈가 배치되지 않았다는 에러를 뱉으며 위젯이 아무것도 그려지지 않습니다.

 

이 에러를 해결하는 방법으로는..

ListView에 사이즈를 주는방법이 있지만 보통은 그렇게 하면 그 사이즈 만큼에서만 리스트를 스크롤 할 수 있기 때문에 리스트를
크기만큼 전체적으로 보여줘야 하는 경우라면 좋은방법은 아닌거 같습니다.

 

그렇다면 리스트를 다른 위젯과 함께 사용하면서 리스트 전체를 다 보여줘야 하는 경우에는 어떤 위젯을 사용하면 될까요?

 

SingleChildScrollView와 ListView 두가지의 위젯을 사용할 수 있습니다.

먼저 SingleChildScrollView부터 살펴보겠습니다.

여기서 스크롤이 SingleChildScrollView에도 들어가고 ListView.builder에도 들어가게 되어 따로따로 스크롤을 할 수 있는데 그렇게 동작하지 않게 하고 싶다면 ListView.builder의 인자인 

physics에 아래와 같이 해주면 됩니다.

SingleChildScrollView는 ListView.builder에 비해서 퍼포먼스가 떨어지지만 다른 위젯들이 복합적으로 필요하고 스크롤링 기능이 필요할 때 사용합니다.

 

아래와 같이 ListView를 사용할 수도 있습니다.

ListVIew는 목록 항목이 비슷하거나 동일한 위젯을 사용할 때 가장 효과적이며 화면에 표시되는 개체만 렌더링하기 때문에 성능면에서 효과적이라고 합니다.