이번 포스팅에서는 위젯 배치를 결정하는 다양한 컨테이너 위젯에 대해 알아보도록 하겠습니다.
텍스트위젯이나 버튼위젯은 위젯 자체에 컨텐츠를 표시하고 해당 위젯과 직접 상호작용을 할 수 있습니다. 반면에 컨테이너 위젯은 위젯 자체의 컨텐츠를 화면에 표시하는게 아니라 컨테이너에 포함된 자식 위젯을 정해진 위치에 표시하는 역할을 합니다.
컨테이너 위젯 살펴보기
먼저 main.dart 파일을 열고 애뮬레이터를 실행해 주세요. 코드 변경사항도 함께 확인하도록 하겠습니다.
스켑폴드 내부에 body항목을 모두 삭제한 후 container 위젯을 넣어주도록 하겠습니다. 아까도 이야기 했듯이 컨테이너 위젯은 다른 위젯을 컨테이너 내부에 담는 역할을 하는 위젯입니다. 잊지 말아주세요.
컨테이너 위젯은 child 속성을 지정하여 하나의 자식 위젯을 배치할 수 있어요.
- text: hello world의 텍스트를 지정합니다.
- color: Container의 배경 색상을 지정합니다.
- padding: 내부 여백을 지정할 수 있습니다. (예: EdgeInsets.all(12.0) – 모든 면에 12만큼 여백을 추가합니다)
- alignment: 자식 위젯의 정렬 방법을 설정합니다. (예: Alignment.topRIght) 우측상단에 배치가 됩니다.
- width/height: Container의 폭과 높이를 지정할 수 있습니다.
Padding 위젯 살펴보기
Container 위젯과 유사하지만, 여백 (padding) 값만 설정할 수 있습니다.
다음 속성을 사용할 수 있습니다.
- child: Padding 위젯으로 감싸줄 위젯을 지정합니다.
- padding: 여백 값을 지정합니다.
SizedBox 위젯 살펴보기
컨테이너의 너비와 높이만 지정할 수 있는 위젯입니다.
다음 속성을 사용할 수 있습니다.
- child: SizedBox 위젯으로 감싸줄 위젯을 지정합니다.
- width/height: 위젯의 너비와 높이를 지정합니다.
Row 위젯 살펴보기
위젯을 수직(Column) 혹은 수평(Row) 방향으로 배치하는 위젯입니다. 지금까지 살펴본 위젯은 하나의 자식 컨포넌트만 배치할 수 있었다면 Row/column 위젯은 여러개의 자식 컨포넌트를 배치할 수 있는 특징이 있습니다. 즉, 하나 이상의 위젯을 배치할 때 사용합니다.
다음 속성을 사용할 수 있습니다.
- children: Row/Column 위젯 내부에 배치할 위젯들을 지정합니다.
- mainAxisSize: 주 축 (수직/수평) 방향으로 위젯이 차지할 공간을 지정합니다. (MainAxisSize.min / MainAxisSize.max)
- mainAxisAlignment: 주 축 방향으로 위젯을 정렬할 방법을 선택합니다. (예: MainAxisAlignment.center – 중앙 정렬 / spaceAround – 공간에 분포)
Column 위젯 살펴보기
이번에는 column 위젯을 살펴보도록 하겠습니다. Row 위젯과 사용방법은 모두 동일하며 수직방향으로 자식들이 배치가 되는걸 확인할 수 있습니다.
ListView 위젯 살펴보기
하나 이상의 위젯을 수직 방향으로 배치할 때 사용하며, 위젯이 화면 크기를 넘어서면 스크롤뷰를 표시합니다.
다음 속성을 사용할 수 있습니다.
- children: 위젯 내부에 배치할 위젯들을 지정합니다. 텍스트를 계속 넣어준 다음 오른쪽 애뮬레이터에서 마우스로 스크롤이 되는 모습을 확인할 수 있습니다.
- padding: 리스트뷰 내부 여백을 설정합니다.
