• 컬럼은 세로축으로 가능한 모든 공간을 차지합니다. 가로축은 그 크기만큼만 차지합니다.

1. Column() 기본

Column(
	children: [
    	Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          child: Text('Container 1')
        ),
        Container(
            width: 100,
            height: 100,
            color: Colors.green,
            child: Text('Container 2')
        ),
        Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
            child: Text('Container 3')
        ),
    ]
)

2. Column 내용물 가운데 정렬(Center Widget)

Center(
	child: Column(...)
)

• Center Widget으로 Column을 감싸면 중앙에 위치하게 됩니다.

3. Column 내용물 정 중앙에 정렬

Center(
	child: Column(
    	mainAxisAlignment: MainAxisAlignment.center
        ...
    )
)

4. Column 내용물 정 중앙에 구간 딱 맞게 정렬

Center(
	child: Column(
    	mainAxisSize: MainAxisSize.min
    )
)

5. Column 내용물 아래부터 정렬

Column(
	verticalDirection: VerticalDirection.up,
)

6. Column을 일정한 간격으로 배치

1. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
2. mainAxisAlignment: MainAxisAlignment.spaceAround,
3. mainAxisAlignment: MainAxisAlignment.spaceBetween,

7. Column 가로축 정렬

7-1

Column(
      children: <Widget>[
        Container(
          width: 200,
          height: 100,
          color: Colors.blue,
          child: Text('Container 1')
        ),
        Container(
            width: 100,
            height: 100,
            color: Colors.green,
            child: Text('Container 2')
        ),
        Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
            child: Text('Container 3')
        ),
      ],
    );

• 기본으로는 가운데 정렬이 됩니다.

7-2

Column(
	crossAxisAlignment: CrossAxisAlignment.start,
    ...
)

• CrossAxisAlignment.start일 경우, 좌측 정렬이 됩니다.

7-3

Column(
	crossAxisAlignment: CrossAxisAlignment.end,
    ...
)

• CrossAxisAlignment.end일 경우, 우측 정렬이 됩니다.

8. Column 내부 우측 정렬

Column(
	crossAxisAlignment: CrossAxisAlignment.end,
    ...
    children: [
    	...
        Container(
        	width: double.infinity
        )
    ]
)

• 참고로, CrossAxisAlignment.end를 없에게 되면, 내용들은 중앙에 배치됩니다. width: double.infinity 로 인해서 가로축 전체를 가지고있는 Container를 포함한 Column은 #7처럼 기본적으로 중앙에 배치되기 때문입니다.

9. Column 가로로 꽉 채우기

Column(
	crossAxisAlignment: CrossAxisAlignment.stretch,
)

참고문헌

1. https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
2. https://www.youtube.com/watch?v=8ZpMFUlFcvo&list=PPSV (유튜브 코딩쉐프)