플러터(Flutter)는 다양한 UI 디자인을 구현할 수 있는 강력한 도구입니다. 이번 포스트에서는 Column을 이용하여 다양한 UI 디자인 예시를 구현하는 방법에 대해 알아보겠습니다.

Column이란?

Column은 세로 방향으로 위에서 아래로 위젯을 배치하는 Flutter의 레이아웃 위젯입니다. 주로 목록이나 세로로 정렬된 컨텐츠를 표현할 때 사용됩니다.

예시 1: 단순한 텍스트 목록

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

이 예시에서는 Text 위젯을 이용하여 단순한 텍스트 목록을 생성했습니다. Column의 children 속성을 사용하여 여러 개의 Text 위젯을 세로로 배치할 수 있습니다.

예시 2: 이미지와 텍스트 조합

Column(
  children: <Widget>[
    Image.network('이미지 URL'),
    Text('이미지 설명'),
  ],
)

이 예시에서는 Image와 Text 위젯을 조합하여 이미지와 해당 이미지의 설명을 세로로 배치했습니다. 이미지에 Image.network를 사용하여 웹에서 이미지를 가져올 수 있습니다.

예시 3: 폼 필드와 버튼 조합

Column(
  children: <Widget>[
    TextField(
      decoration: InputDecoration(
        labelText: '이름',
      ),
    ),
    ElevatedButton(
      onPressed: () { },
      child: Text('저장'),
    ),
  ],
)

이 예시에서는 TextField와 ElevatedButton 위젯을 조합하여 이름을 입력받는 폼 필드와 저장 버튼을 세로로 배치했습니다. TextField에서는 decoration 속성을 이용하여 입력 필드의 레이블을 추가할 수 있습니다.

결론

이렇게 Column을 이용하여 다양한 UI 디자인을 구현할 수 있습니다. Column은 간단하면서도 강력한 방법으로 세로 방향의 레이아웃을 구성할 수 있습니다.

플러터의 다양한 레이아웃 위젯을 활용하면 보다 유연하고 다채로운 UI를 디자인할 수 있습니다. Column을 비롯한 다른 레이아웃 위젯도 활용하여 다양한 UI를 구현해보세요!

참고: Flutter - Column 클래스 문서