플러터에서는 Column 위젯을 사용하여 수직 방향으로 위젯을 배치할 수 있습니다. 이를 활용하여 리스트 뷰를 구현할 수 있습니다. 이번 글에서는 플러터 Column을 사용하여 간단한 리스트 뷰를 만드는 방법에 대해 알아보겠습니다.

1. Column 위젯으로 리스트 아이템 배치하기

먼저, Column 위젯을 사용하여 리스트 아이템을 수직으로 배치합니다. 각 리스트 아이템은 Container나 ListTile과 같은 위젯으로 구성할 수 있습니다.

Column(
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.blue,
      child: Center(child: Text('리스트 아이템 1')),
    ),
    Container(
      height: 50,
      color: Colors.red,
      child: Center(child: Text('리스트 아이템 2')),
    ),
    // Add more list items here
  ],
)

위 코드에서 Column의 children 속성에 리스트 아이템으로 사용할 Container 위젯을 추가합니다. 이때 height와 같은 스타일 속성을 통해 각 리스트 아이템의 모양을 설정할 수 있습니다.

2. 리스트 아이템에 onTap 이벤트 추가하기

만약 각 리스트 아이템을 클릭할 때 특정 동작을 수행하고 싶다면, GestureDetector를 이용하여 onTap 이벤트를 추가할 수 있습니다.

Container(
  height: 50,
  color: Colors.blue,
  child: GestureDetector(
    onTap: () {
      // Handle item 1 tap
    },
    child: Center(child: Text('리스트 아이템 1')),
  ),
),

3. Scrollable한 리스트 뷰로 변환하기

만약 리스트의 아이템이 화면을 벗어나면 스크롤이 필요할 수 있습니다. 이때 ListView 위젯을 사용하여 스크롤이 가능한 리스트 뷰로 변환할 수 있습니다.

ListView(
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.blue,
      child: Center(child: Text('리스트 아이템 1')),
    ),
    Container(
      height: 50,
      color: Colors.red,
      child: Center(child: Text('리스트 아이템 2')),
    ),
    // Add more list items here
  ],
)

위 코드에서 ListView의 children 속성에 리스트 아이템으로 사용할 Container 위젯을 추가하여 스크롤이 가능한 리스트 뷰를 구현할 수 있습니다.

마무리

이렇게 플러터의 Column을 이용하여 간단한 리스트 뷰를 만들어보았습니다. 여기에 더 많은 위젯과 스타일을 추가하여 더 다채로운 리스트 뷰를 구현해볼 수 있습니다.

위의 예시 코드를 사용하여 여러분만의 리스트 뷰를 만들어보세요!