Column : 세로 정렬

1. Container

• Flutter에서 가장 많이 사용하는 위젯 중 하나

• 대부분 사이즈와 간격 조절을 위한 layoutWidget으로 많이 사용

• width : Container의 너비를 지정
• 픽셀 단위로 지정하거나 부모 위젯에 대한 상대적인 비율을 나타내는데 사용

• height : Container의 높이를 지정
• 너비와 마찬가지로 픽셀 단위 또는 상대적인 비율로 지정

• margin : Container 주위의 여백을 지정
• Container를 다른 위젯으로부터 얼마나 떨어뜨릴지를 결정

• padding : Container 내부의 여백을 지정
• Container의 내부 콘텐츠와 Container의 테두리 사이의 공간 결정

• constraints : Container의 크기를 제약하는 데 사용
• 최소/최대 너비와 높이 지정 → Container가 어떻게 확장 또는 축소될 수 있는지 제어

2. child과 children

• 위젯의 구성 요소를 나타내는 속성

• child
• Container, Text, Image 등 대부분의 단일 자식을 가지는 위젯에 사용
• 해당 위젯의 주요 내용을 정의

• children
• Row, Column, ListView, Stack등 대부분 여러 개의 자식을 가지는 위젯에 사용
• 위젯의 여러 요소, 위젯 리스트로 구성
 

3. Column

• 자식 위젯들을 세로로 배치시킬 수 있는 LayoutWidget

4. 기본

Column(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
);

5. MainAxisAlignment : 세로 정렬

• enum 클래스 - MainAxisAlignment 6개의 타입

Column(

  // MainAxisAlignment. 입력
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
  ],
);

• MainAxisAlignment.start : Column 위젯의 윗부분부터 배치

• MainAxisAlignment.cent : Column 위젯의 가운데에 배치

• MainAxisAlignment.end : Column 위젯의 끝부분에 배치

• MainAxisAlignment.spaceBetween : 자식들의 사이를 일정 간격으로 배치

• MainAxisAlignment.spaceAround

• MainAxisAlignment.spaceEvenly : 양 끝과 자식들의 사이를 일정 간격으로 배치

3. MainAxisSize

• Column의 사이즈를 지정

• min : Column을 자식 위젯들만큼의 사이즈로 최소화

• max : 자식 위젯들과는 상관 없이 가능한한 최대의 사이즈로 변경

• Scroll이 있는 위젯을 사용한다면 에러가 발생

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: customAppBar(title: "ColumnScreen"),
      body: _body(),
    );
  }

  Widget _body() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
      ],
    );
  }

• MainAxisSize.max로 변경한다면 다시 간격이 생긴 형태로 변경

4. CrossAxisAlignment : 가로 축의 위치 설정

SizedBox(
  width: double.infinity,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
)

• CrossAxisAlignment.start : 가로 축에서 왼쪽 배치

• CrossAxisAlignment.center : 가로 축에서 가운데 배치

• CrossAxisAlignment.end : 가로 축에서 오른쪽에 위치 배치

• CrossAxisAlignment.strech : 가로 영역을 최대로 확장 배치

5. VerticalDirection

• 위젯의 세로방향 순서를 설정

• VerticalDirection.down : 자식 위젯들을 위에서 아래로 순서대로

• VerticalDirection.up : 자식 위젯들을 아래에서 위로 순서대로

SizedBox(
  width: double.infinity,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    mainAxisSize: MainAxisSize.max,

    /// textDirection과 textBaseline 특성은 Row 위젯에서만 적용이 가능합니다.
    /// Row위젯에 대한 포스팅에서 다루겠습니다.
    // textDirection: ,
    // textBaseline: ,

    /// VerticalDirection.up은 순서를 바꿔서 출력해줍니다.
    /// 다시 말해서 자식 위젯들을 아래에서 위로 올라가는 순서로 그려준다는 의미입니다.
    /// 빨간 Container부터 아래에서 위로 그리기 때문에 제일 아래 위치했습니다.
    /// VerticalDirection.down은 위에서 아래로 그려줍니다.
    /// 빨간 Container가 제일 위에 위치했습니다.
    crossAxisAlignment:CrossAxisAlignment.end ,
    verticalDirection: VerticalDirection.down,
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
);

• VerticalDirection.up : 아래에서 위로 순서대로 배치

• VerticalDirection.down : 위에서 아래 순서대로 배치

6. Expanded

• 자식 위젯을 Expanded로 감싸면 감싼 위젯을 최대 영역으로 확장

SizedBox(
  width: double.infinity,
  child: Column(
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Expanded(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
)

SizedBox(
  width: double.infinity,
  child: Column(
    children: [
      Expanded(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
      Expanded(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
);