UI 만들기 - Container, Column, Row

Container

 

컨테이너는 플러터에서 간단하게 레이아웃을 만들 수 있는 위젯임

다른 위젯을 감싸거나 화면의 영역을 나누는 역할을 한다

그래서 그냥 Container() 이렇게만 넣어놓고 실행하면 아무것도 뜨지 않는다. 감싸는 역할만 하므로!

 

컬러를 넣어줄건데, Colors.grey 처럼 그냥 해줘도 되지만 

Color(0xFFFFE0) 처럼 헥스값을 그대로 이용할 수도 있다

 

이번에는 FlutterLogo() 라는 커스텀 위젯을 이용해서 이미지를 넣어볼 것이다

컨테이너의 영역같은 경우는 child 속성이 있으면 그 만큼을 차지하고,

child 속성이 없으면 전체 영역을 차지한다.

 

컨테이너의 크기를 지정해주고 싶으면 width 나 height 값을 이용하면 된다

 

맥시멈값을 쓰고 싶으면 double.infinity 를 이용하면 된다

 

margin 속성은 위젯 외부에 공간을 추가하는거고

padding 은 위젯 내부에 공간을 추가하는 것이다.

 

EdgeInsets. 에는 all 이나 symmetric, fromLTRB 등등이 있는데

fromLTRB 값은 left, top, right, bottom 을 개별 값으로 설정 가능함

symmetric은 상하좌우 여백을 설정 가능

이번에는 all로 모든 방향에 동일한 여백을 지정해볼 것이다

 

margin: 과 padding: 에 동일하게 EdgeInsets.all(50)을 추가해주면 된다

 

 

Column

얘네는 children 속성을 가지고 있고 여러가지 위젯을 나열하는데 사용됨. 세로로 위젯을 배치함

칼럼의 속성은 mainAxisAlignment랑 crossAxisAlignment가 있다

칼럼은 세로로 위젯을 배치하는 것이므로 세로가 main축 가로가 cross축이다

 

MainAxisAlignment 속성을 보면 center end 등등이 있는데 얘네를 이용해서 각각 배열해줄 수 있다

 

 

CrossAxisAlignment 속성을 보면 start end stretch 값을 이용해서 정렬해줄 수 있다

 

다음으로 mainAxisSize 은 컬럼의 크기에 대한 속성이기때문에, 컨테이너 크기 코드를 주석처리해준다

 

이렇게 min 값으로 해주면 자식 위젯의 최소 영역, max는 최대 영역으로 화면에 지정이 됨

 

Row

Row 같은 경우는 위와 동일한데 가로로 위젯을 위치하는 것이고 가로가 main축, 세로가 cross축이라는 것이 달라진 점이다.