Flutter의 컬럼(Column) 위젯 사용법

Flutter에서 Column 위젯은 자식 위젯들을 수직으로 배치하는 데 사용됩니다. 화면을 구성할 때 자주 사용되는 Column 위젯은 레이아웃을 구조화하고, 위젯들을 세로로 나열하는 데 매우 유용합니다. 이번 글에서는 Flutter의 Column 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Column 사용법

Column 위젯의 기본적인 사용법은 여러 자식 위젯을 수직으로 배치하는 것입니다.

 

Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

 

위 코드는 세 개의 텍스트 위젯을 수직으로 나열하는 간단한 Column을 생성합니다.

2. MainAxisAlignment 사용

Column 위젯의 mainAxisAlignment 속성은 주 축(수직 축)에서 자식 위젯들의 정렬 방식을 지정합니다. MainAxisAlignment 클래스의 다양한 값을 사용할 수 있습니다.

 

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

 

위 코드는 자식 위젯들을 수직 축에서 균등하게 배치합니다.MainAxisAlignment의 주요 값들

• MainAxisAlignment.start: 자식 위젯들을 상단에 정렬합니다.
• MainAxisAlignment.end: 자식 위젯들을 하단에 정렬합니다.
• MainAxisAlignment.center: 자식 위젯들을 중앙에 정렬합니다.
• MainAxisAlignment.spaceBetween: 첫 번째와 마지막 자식 위젯을 각각 시작과 끝에 배치하고, 나머지 자식 위젯들을 사이에 균등하게 배치합니다.
• MainAxisAlignment.spaceAround: 자식 위젯들 사이에 동일한 간격을 두고 배치합니다.
• MainAxisAlignment.spaceEvenly: 자식 위젯들 사이와 가장자리에 동일한 간격을 두고 배치합니다.

3. CrossAxisAlignment 사용

Column 위젯의 crossAxisAlignment 속성은 교차 축(수평 축)에서 자식 위젯들의 정렬 방식을 지정합니다. CrossAxisAlignment 클래스의 다양한 값을 사용할 수 있습니다.

 

 

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 50,
      width: 100,
    ),
    Container(
      color: Colors.blue,
      height: 50,
      width: 150,
    ),
    Container(
      color: Colors.green,
      height: 50,
      width: 200,
    ),
  ],
)

 

위 코드는 자식 위젯들을 수평 축의 시작 부분에 정렬합니다.CrossAxisAlignment의 주요 값들

• CrossAxisAlignment.start: 자식 위젯들을 수평 축의 시작 부분에 정렬합니다.
• CrossAxisAlignment.end: 자식 위젯들을 수평 축의 끝 부분에 정렬합니다.
• CrossAxisAlignment.center: 자식 위젯들을 수평 축의 중앙에 정렬합니다.
• CrossAxisAlignment.stretch: 자식 위젯들을 수평 축을 가득 채우도록 확장합니다.
• CrossAxisAlignment.baseline: 자식 위젯들을 기준선에 맞춰 정렬합니다. (텍스트 위젯에 유용)

 

반응형

 

 

4. MainAxisSize 사용

Column 위젯의 mainAxisSize 속성은 주 축의 크기를 지정합니다. MainAxisSize 클래스의 두 가지 값을 사용할 수 있습니다.

 

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

 

위 코드는 Column의 크기를 자식 위젯들의 크기에 맞게 최소화합니다.MainAxisSize의 주요 값들

• MainAxisSize.max: 주 축의 가용 가능한 최대 크기를 사용합니다.
• MainAxisSize.min: 주 축의 자식 위젯들이 필요한 최소 크기를 사용합니다.

5. Flexible과 Expanded 사용

Column 위젯 안에서 자식 위젯의 크기를 조절하려면 Flexible과 Expanded 위젯을 사용할 수 있습니다

 

Column(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        child: Center(child: Text('Expanded')),
      ),
    ),
    Flexible(
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('Flexible')),
      ),
    ),
  ],
)

 

위 코드는 Expanded와 Flexible 위젯을 사용하여 자식 위젯의 크기를 조절합니다. Expanded 위젯은 남은 공간을 모두 차지하고, Flexible 위젯은 자식 위젯이 차지할 수 있는 공간을 최대한으로 사용합니다.

결론

Column 위젯은 Flutter에서 자식 위젯들을 수직으로 배치하는 데 매우 유용한 도구입니다. mainAxisAlignment, crossAxisAlignment, mainAxisSize 등의 속성을 통해 자식 위젯들의 배치와 크기를 세밀하게 조정할 수 있으며, Flexible과 Expanded 위젯을 사용하여 레이아웃을 더욱 유연하게 구성할 수 있습니다. Column 위젯을 활용하여 직관적이고 효율적인 사용자 인터페이스를 설계해보세요.