칼럼과 로우는 앱을 만들 때 가장 기본적인 위젯이에요.
대부분의 앱은 칼럼을 쌓거나 로우를 나란히 배치하여 구성돼요.
칼럼과 로우는 모든 앱에서 사용되며, 모든 페이지에서 사용돼요.
칼럼과 로우는 두 개의 축을 가지고 있어요.
메인 축과 크로스 축으로 구분돼요.
칼럼은 세로로 정렬되고, 로우는 가로로 정렬돼요.
칼럼과 로우의 속성을 사용하여 공간을 최대한 활용할 수 있어요.
Column 위젯을 다룰 때, main axis size, main axis alignment, space evenly, space around, space between의 설정이 중요해요.
main axis size는 Column 위젯의 크기를 결정해요.
main axis alignment은 Column의 내부 위젯을 어디에 배치할지 결정해요.
start, center, end 중에서 선택할 수 있어요.
space evenly는 위젯과 위젯 사이의 간격을 동일하게 맞추고 양옆에도 동일한 간격을 둬요.
space around는 위젯과 위젯 사이 간격을 평균으로 맞추고 양옆에는 해당 위젯만큼의 간격을 둬요.
space between는 첫번째와 마지막 위젯은 끝으로 배치하고 내부 위젯들은 동일한 간격으로 배치해요.
Column의 수평축에 대해 설명하며, 자식 위젯들이 column 안에서 어떻게 정렬되는 지 정할 수 있음을 이야기 해요.
그러나 모든 자식 위젯이 같은 width를 가질 때는 수평 정렬 설정이 바뀌지 않기 때문에 fill width하는 child를 추가해야 하죠.
기존 자식 중 fill width를 가지게 하면, column이 모든 공간을 다 채울 수 있어요.
이 때 width 크기로 Infinity를 주면 되고, 이렇게 하면 column이 화면 전체 크기의 공간을 채우게 됩니다.
Flutter에서 자식 위젯의 레이아웃 크기를 더 크게 만드는 방법 중 하나는, 부모 위젯이 크기 제약을 더 크게 혹은 무한대로 가져오는 것이에요.
부모 위젯에서 몇 가지 설정을 바꿔주면, 자식 위젯을 높이와 너비가 가득 차게 할 수도 있어요.
또한, Cross-Axis Alignment Stretch 속성을 사용하여 부모 위젯에 자식 위젯들을 늘려줄 수도 있지만, 이렇게 할 경우, 자식 위젯들의 크기도 함께 커지게 돼요.
Column 위젯은 대개 영역을 최대한 채우기 때문에 자식 위젯들이 해야 할 작업이나 채워야 할 공간에 맞게 레이아웃을 바꿔준다는 것도 알아두면 좋아요.
'scrollable' 프로퍼티 사용 시 두 가지 문제가 발생해요.
우선 Column은 인자로 전달된 위젯에 대한 공간 할당을 alignment를 통해 수행하는데, 스크롤 기능이 'on'으로 되어있으면 할당할 공간이 무한대로 늘어버려 'unbounded height error'가 발생하죠.
두 번째로 스크롤 기능이 'on'일 때 위젯 목록에 수록된 위젯을 스크롤할 수 있게 됩니다요.
스크롤은 보통 위젯의 높이 제약에 이루어져요.
높이 제약은 스크롤의 기반이 되는 스크린 크기 또는 부모 위젯에서 결정돼요.
예를 들어, 컨테이너 위젯의 높이를 200픽셀로 지정하면, 스크롤 될 것이에요.
높이제약을 걸지 않는 대신 위젯을 더욱 커지게 해서 overflow되게 할 수도 있어요.
row는 기존 위젯을 바꿔서 쓰는데요, column과 비슷한 역할을 해요.
Flutter에서 axis size 설정과 에러
주축 사이즈를 Max로 설정하면 가로 공간 전체를 채우고, Min으로 설정하면 자식 요소에 맞게 축소돼요.
이 때, 크로스 축은 마찬가지로 문제가 발생하여 자식 요소에 맞게 높이가 축소돼요.
이전과 마찬가지로 그 위에 스트레치나 비슷한 작업을 할 수 있어요.
하지만, 이 문제를 해결하기 위해 컨테이너에 감싸서 높이를 500픽셀로 설정해줘야하며, 가운데로 정렬되어 크로스 축 정렬 작업을 수행할 수 있어요.
마지막으로, 에러가 발생할 수 있지만, 이 비디오를 통해 이해하고 쉽게 해결할 수 있게 될 거예요.
Flutter에서 발생하는 높이문제 해결법은?
Flutter에서 레이아웃이 잘못되어 높이값을 알 수 없다면 Infinite height 오류가 발생하죠.
페이지를 새로고침하여 해결할 수 있어요.
'Column' 위젯을 사용 중인 경우 자식 위젯의 개수와 그 크기에 따라 컨테이너의 높이가 결정되므로 높이값이 유연해야 하는 경우 Infinite height 오류가 발생할 수 있어요.
해결 방법으로는 컨테이너에 명시적인 높이 값을 설정하여 해결하거나, 'Expanded' 위젯을 사용하여 자식 위젯의 크기가 유연하게 변하도록 할 수 있어요.
Flutter에서는 'expanded' 위젯을 사용하여 스크린의 전체 높이를 채울 수 있어요.
'Expanded'는 컬럼 또는 로우에서 남은 공간을 채우는 역할을 하죠.
또는 퍼센트로 높이를 지정하여 더 명시적으로 설정할 수 있어요.
또한, 컬럼에서 자식들 간에 간격을 추가하는 'item spacing property'도 사용할 수 있어요.
이로써 반복적인 패딩 작업을 피하고 한 번 설정으로 모든 자식 아이템 사이에 간격을 추가할 수 있어요.
컬럼의 시작과 끝 부분에 간격을 추가하고 싶다면 'Apply to start and end' 토글 버튼을 사용하면 돼요.
변수로 아이템 간격을 설정하여 다이나믹한 간격을 가질 수 있어요.
예를 들어, 첫 번째 아이템 이후에 큰 간격을 주고 싶은 경우, highlight를 위해서라면 변수로 아이템 간격을 설정할 수 있어요.
이렇게 설정된 컬럼과 로우는 FlutterFlow에서 사용할 수 있어요.