Column Widget & Row Widget

- Column Widget은 수직(세로) 배치하기 위한 위젯이며 Row Widget은 수평(가로) 방향으로 배치하기 위한 위젯.

Column Widget

body: SafeArea(
  child: Center(
child: Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      child: const Text('Hello'),
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
      child: const Text('Hello'),
    ),
    Container(
      color: Colors.white,
      width: 100,
      height: 100,
      child: const Text('Hello'),
    ),
  ],
),
)),

• 중앙 정렬하려면?

//단순 중앙 정렬
mainAxisAlignment: MainAxisAlignment.center

• container들을 일정 간격을 두고 배치하려면?

//일정 간격 배치
mainAxisAlignment: MainAxisAlignment.spaceEvenly

• container들을 상단 중단 하단으로 배치하려면?

//상,중,하단으로 배치
mainAxisAlignment: MainAxisAlignment.spaceBetween

mainAxisAlignment	MainAxisAlignment	Property	설명
		.start	왼쪽 위 정렬
		.center	가운데 정렬
		.spaceEvenly	영역을 고르게 정렬
		.spaceBetween	start, end 사이에 고르게 배치
		.spaceAround	앞/뒤 영역을 두고 사이에 배치

• mainAxisAlignment를 사용하면 세로 축에 모든 공간을 차지하게 된다. 이를 사용하지 않으려면?

//필수 공간만큼의 중앙 정렬
mainAxisSize: MainAxisSize.min

mainAxisSize	MainAxisSize	Property	설명
		.min	크기 만큼 차지
		.max	남은 영역을 모두 사용

Row Widget

body: SafeArea(
child: Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 100,
      child: const Text('Hello'),
    ),
    Container(
      color: Colors.blue,
      height: 100,
      child: const Text('Hello'),
    ),
    Container(
      color: Colors.white,
      height: 100,
      child: const Text('Hello'),
    ),
  ],
),
)),

• 가로축 width를 최대로 사용하려면?

//width만 지정했을 때 화면에는 보이지 않은 invisible Container가 된다.
Container(
	width: double.infinity
)

• 가로 축에서의 위치를 지정하려면?

//가로 축 오른쪽 배치
crossAxisAlignment: CrossAxisAlignment.end

• 가로 축으로 Container를 꽉 채우고 싶으면?

//Container의 width 속성을 다 지워야함.
crossAxisAlignment: CrossAxisAlignment.stretch

• Container 사이에 공간을 주고 싶다면?

//높이 지정해주고 싶은 만큼 height 설정
SizedBox(
	height:30.0
)

참고 자료
https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e