플러터 위젯 - 화면 배치에 쓰는 위젯(1)

위젯은 화면을 구성하는 컴포넌트다.

 

UI는 위젯의 조합으로 구성되므로 위젯을 많이 알수록 더 좋은 UI를 만들 수 있다.

 

플러터는 머티리얼 디자인을 표준 디자인으로 사용하지만 필요에 따라 iOS 쿠퍼티노 디자인도 사용 가능하다.

 

오늘은 수많은 위젯 중 화면 배치에 쓰는 위젯 몇 가지를 살펴볼 예정이다.

 

1. Container

 

Container는 아무것도 없는 위젯을 뜻하며 다음과 같은 특징을 가지고있다.

 

•다양한 프로퍼티를 가지고 있음

•사용하기에 따라서 다양한 응용 가능

•가로 세로 길이, 색, 안쪽 여백(padding), 바깥쪽 여백(margin)등 설정 가능

•Child 프로퍼티로 또 다른 위젯을 자식으로 가질 수 있음

 

2. Column

 

Column은 수직 방향으로 위젯들을 나란히 배치하는 위젯이다.

 

Children 프로퍼티에는 여러 위젯의 리스트가 지정 가능하다.

 

3. Row

 

수평 방향으로 위젯들을 나란히 배치하는 위젯이다.

 

Column과 마찬가지로 Children 프로퍼티에는 여러 위젯의 리스트가 지정 가능하다.

 

4. mainAxis, crossAxis

 

위젯의 기본 방향과 반대 방향을 나타낸다.

 

Row는 오른쪽, Column은 아래쪽이 mainAxis가 된다.

 

crossAxis는 기본 방향의 반대 방향을 나타낸다.

출처: samanthaming.com

 

5. Stack

 

Children에 나열한 여러 위젯을 순서대로 겹치게 한다.

 

사용방법은 Row, Column과 같다.

 

Children 프로퍼티에 먼저 작성한 위젯이 가장 아래쪽에 위치, 나중에 작성한 위젯이 위쪽에 위치한다.