컨테이너를 이용해 레이아웃을 짜는 것은 아주 좋다.
하지만 다른 여러가지를 상대적으로 배치하고 싶다면 어떨까?
그러려면 한개가 아니라 여러개를 수용할 수 있는 무언가가 필요한데, 그럴때 column과 row를 사용할 수 있다.
이 방법을 통해 위젯을 수직 또는 수평 방향으로 배치하고 크기를 결정할 수 있다!
이렇게 column을 사용해봤는데 결정적으로는 column에 child는 없다.
대신 children이 들어가고, [ ] 은 안에 여러개의 위젯들을 넣을 수 있는 리스트가 된다.
Column의 children으로 전 강의에서 만들어줬던 container을 넣어줬는데, column은 자식 요소가 하나보다 더 있을때 작동하기 때문에 아직은 변함이 없는 것을 볼 수 있다.
이번에는 container를 하나 더 만들어서 column이 작동하게 만들어봤다.
이렇게 container을 두개 만드니 column, 즉 수직으로 이렇게 나오는 것을 볼 수 있다!
container 3 까지 만들어줬는데, 이 세개의 container들이 column 안에서 수직으로 배치돼있는 것을 볼 수 있다.
column은 사진처럼 항상 자동으로 가능한 한 많은 수직 공간을 차지한다. (웹이랑 똑같은듯!)
그러니까 수직으로는 화면의 맨 아래까지 전부 차지하려하고 수평으로는 자식의 크기만큼만 차지한다.
css의 flex-row, flex-column과 똑같이 보면 될듯함
그리고 수직으로 공간을 전부 차지하는걸 원하지 않는다면 이렇게 mainAxisSize을 min으로 줘서 column의 크기를 정할 수 있다.
또 verticalDirection을 사용해서 column이 시작되는 방향을 바꿀 수도 있다.
볼수록 css flex랑 비슷한것같다!
이렇게 crossAxisAlignment를 사용해 넓이를 늘릴수도 있고, 이 외에도 space-between이나 space-evenly 등 여러가지 효과를 줄 수 있는 방법들이 있다.
근데 코딩 공부 하면서 느낀게 다 외우려고 하면 안되고 필요할때 찾아서 쓰는게 훨씬 나아서 그냥 이런게 있다 정도만 알면 될듯!
또 이렇게 웹에서 빈 div 넣어서 간격 떨어뜨려주듯이 flutter에서는 안보이는 sizedbox를 이용해 높이를 줘 자식 요소들을 떨어뜨려줄 수 있다.
다음으로 column을 row로 바꿔줘봤다.
container들이 세로로 쌓이는 것이 아니라 가로로 나란히 정렬되며, 가로축으로 정렬된 상태에서 strech를 주니까 container들의 세로 길이가 늘어나는 것을 볼 수 있다.
세줄요약 -
1. Column: 세로 정렬 Row: 가로 정렬
2. 여러가지 효과를 줄 수 있다, 필요시 구글링 필수!
3. 웹이랑 느낌이 비슷하다, 빨리 적응되면 좋겠다..
