Row(행)와 Column(열)위젯은 flutter 레이아웃에서 안쓰는 경우가 없을 정도로 매우 유용하고 대부분의 레이아웃 디자인이 가능하다.
나는 행과 열이 가끔 헷갈릴때가 있는데
행열이 익숙해? 열행이 익숙해? ->행열
가로세로가 익숙해? 세로가로가 익숙해? ->가로세로
➡️즉, 행(가로)열(세로)!
이렇게 생각하면 쉽다 ! 이랬는데도 헷갈리면 아래 이미지를 떠올리면 더 이상 행열을 헷갈리지 않을 것이다😉
👉🏻Row Widget (행,가로)
👇🏻Column Widget (열,세로)
위젯 정렬하기
생성자를 호출하고 필요한 속성을 제공하여 행 또는 열 위젯을 만들 수 있다.
행(Row) 위젯 사용시, 주축(mainAxis)은 수평(가로)이며, 횡축(crossAxis)는 세로이다.
열(Column)위젯 사용시, 주축(mainAxis)은 수직(세로)이며, 횡축(crossAxis)는 가로이다.
MainAxisAlignment.center
Row(행) ->가로축을 기준으로 가운데 정렬
column(열) ->세로축을 기준으로 가운데 정렬
MainAxisAlignment.start
Row(행) ->가로축을 기준으로 왼쪽으로 정렬
column(열) -> 세로축을 기준으로 위쪽으로 정렬
MainAxisAlignment.end
Row(행) ->가로축을 기준으로 오른쪽으로 정렬
column(열) ->세로축을 기준으로 아래쪽으로 정렬
MainAxisAlignment.spaceEvenly
child 위젯 간의 공간을 두고, 같은 크기만큼 양 옆에 공간을 둔다.
Row(행)
column(열)
MainAxisAlignment.spaceAround
spaceEvenly와 비슷하지만, child 위젯간의 공간을 두고, 절반 크기만큼 양 옆에 공간을 둔다.
Row(행)
column(열)
MainAxisAlignment.spaceBetween
child 위젯간의 공간을 두지만, spaceEvenly와 spaceAround와는 다르게 양 옆에 공간을 만들지 않는다.
Row(행)
column(열)
CrossAxisAlignment.center
Row(행)
column(열)
CrossAxisAlignment.start
Row(행)
column(열)
CrossAxisAlignment.end
Row(행)
column(열)
📍참고자료
