[Flutter] Flutter의 Row와 Column + SizedWidget

SwiftUI에 HStack, VStack이 있다면 플러터에는 Row, Column이 있습니다. 

그리고 SwiftUI에 Spacer가 있다면 플러터에는 SizedWidget이 있습니다. (혹은 Spacer: eunjin3786.tistory.com/277 )

 

 

[1] Row와 Column

 

 

Row 와 Cloumn의 생성자는 우선 이렇게 생겼습니다. 

https://api.flutter.dev/flutter/widgets/Row/Row.html

https://api.flutter.dev/flutter/widgets/Column/Column.html

 

 

[2] Row, Column의 자식들 정렬

 

Row, Column의 생성자에 있는 MainAxisAlignment와 CrossAxisAlignment는 children을 어떻게 정렬해줄 건가!! 하는거에요

 

두개 다 enum type이고 각각 종류는 다음과 같아요

 

 

MainAxisAlignment 

- center

- start

- end

- spaceAround

- spaceBetween

- spaceEvenly

 

 

CrossAxisAlignment

- baseline

- center

- start

- end

- stretch

 

 

예를들어 이런식으로 쓸수있습니다. 

 

 

그리고 위의 옵션 뿐만아니라 Expanded widget을 사용해서 자식 위젯들이 Row나 Column에 꽉차게 해줄 수 도있고 

 

 

Expanded widget의 flex 프로퍼티를 사용해서 아래와 같이 해줄 수도 있어요 

 

 

 

 

[3] SizedBox

 

SizedBox는 이런식으로 width, height를 줘서 특정 사이즈를 잡도록(??) 해주는 위젯입니다. 

SizedBox(width: 5)

SizedBox(height: 5)

 

https://api.flutter.dev/flutter/widgets/SizedBox-class.html

 

생성자는 이렇게 생겼어요

 

https://api.flutter.dev/flutter/widgets/SizedBox/SizedBox.html

 

예를 들어

리스트뷰의 Row를 구성할때 

SizedBox를 이용해서 위젯 간의 간격을 설정해주는데 쓸 수 있습니다. 

 

 

 

 

 

 

 

 

Reference

flutter.dev/docs/development/ui/layout

Layouts in Flutter