(코딩쉐프) 21강 Column widget, Row widget

 

추천 사이트: Flutter Layout Cheat Sheet. Do you need simple layout samples for… | by Tomek Polański | Flutter Community | Medium

1. Column

- 아래처럼 새로로 배치할 때 사용하며, 중요한 건 컬럼은 아래 공간까지 다 차지한다는 것!

- 정렬방법1. Center위젯으로 감싸면 아래처럼 되고

- 정렬방법2. Column에 있는 위젯들을 세로로 정렬할 때는 아래와 같은 속성을 사용할 수 있다.

mainAxisAlignment: MainAxisAlignment.spaceEvenly

- 정렬방법3. 조금 중요한데 요소들을 오른쪽 끝에 붙이고 싶으면?

crossAxisAlignment: CrossAxisAlignment.end,

위와 같이 명령어를 써도 실제로는 동작하지 않는다.. 왜그럴까? 일단 동작하는 건 맞다. 하지만 가로 폭이 요소폭이랑 같아서 변화가 없는 것

아래와 같은 invinsible Container를 사용하면 된다.

Container(
  width: double.infinity,
)

 

 

 

 

 

 

 

 

 

사용 결과

 

- 정렬방법4. 컨테이너를 가로로 꽉 채우고 싶으면? 아래와 같이 주고 각 컨테이너의 폭width를 다 없애준다.

crossAxisAlignment: CrossAxisAlignment.stretch,

- 정렬방법5. 박스간의 간격을 조정하고 싶을 때는 SizedBox를 넣어서 간격 조절하기

 

 

2. Row는 Column과 반대 개념