[Flutter] Column - 사용법

 

 

Flutter에서 가장 많이 사용하는 위젯 중 하나인 Column 위젯에 대해 알아보겠습니다.

Column은 자식 위젯들을 세로로 배치시킬 수 있는 LayoutWidget입니다. 

 

기준축, 교차축 이해

 

1. 기본 

red, blue 컬러의 컨테이너 두개를 Column의 자식 위젯으로 입력했습니다. 

아무 특성을 주지 않았기 때문에 Column의 최상단에 자식 위젯들이 순서대로 그려졌습니다.

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

 

 

 

2. MainAxisAlignment

 

이번에는 green 컨테이너를 추가하고, 컨테이너들을 어떤 방식으로 배치할지 알아보겠습니다. Flutter에서 위젯의 위치를 결정짓는 특성은 대부분 Alignment라는 단어가 들어갑니다. Column에서는 mainAxisAlignment 특성을 사용하면 됩니다. 

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,
    ),
  ],
);

 

 

enum 클래스인 MainAxisAlignment에는 6개의 타입이 있습니다. 각 타입별로 이미지로 확인해보겠습니다. 

왼쪽부터 MainAxisAlignment.start, MainAxisAlignment.center, MainAxisAlignment.end

MainAxisAlignment.start는 Column 위젯의 윗부분부터 배치합니다.

MainAxisAlignment.center는 Column 위젯의 가운데에 배치합니다.

MainAxisAlignment.end는 Column 위젯의 끝부분에 배치합니다. 

 

 

왼쪽부터 MainAxisAlignment.spaceBetween, MainAxisAlignment.spaceAround, MainAxisAlignment.spaceEvenly

MainAxisAlignment.spaceBetween는 자식들의 사이를 일정 간격으로 벌려줍니다.

MainAxisAlignment.spaceAround는 자식들의 사이를 일정간격으로 벌려주되 간격의 절반의 사이즈만큼 양쪽 끝 부분에 간격을 줍니다. 

MainAxisAlignment.spaceEvenly는 양 끝과 자식들의 사이를 일정 간격으로 벌려줍니다. 

 

 

 

3. MainAxisSize

MainAxisSize 특성은 Column의 사이즈를 지정해줍니다. 두가지 타입이 있는데 MainAxisSize.min, MainAxisSize.max입니다. min은 Column을 자식 위젯들만큼의 사이즈로 최소화시킵니다. max는 자식 위젯들과는 상관 없이 가능한한 최대의 사이즈로 변경됩니다. 이때 Scroll이 있는 위젯을 사용한다면 에러가 발생합니다. 왜냐면 Scroll의 높이는 정해지지 않았는데 Column의 사이즈를 max로 지정한다면 사이즈가 무한이 되기 때문입니다. 

 

아래 코드를 보면 MainAxisAlignment.spaceEvenly를 지정해주고, MainAxisSize.min을 지정해줬습니다. spaceEvenly 를 줬다면 위쪽에서 본 이미지처럼 간격이 생겨야하는데 MainAxisSize.min 특성 때문에 컬럼 사이즈가 최소화됐고, 그래서 간격들이 사라졌습니다.

 

  @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

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

start는 가로 축에서 왼쪽, 

center는 가로 축에서 가운데

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

Column안에 있는 자식 위젯을 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,
      ),
    ],
  ),
)

 

 

빨간 박스와 파란박스를 둘다 Expanded로 감싸주면 두개의 위젯 크기가 동일하게 변합니다.

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,
      ),
    ],
  ),
);