Flutter의 ListView : 스크롤 가능한 목록 만들기

ListView는 Flutter에서 스크롤 가능한 목록을 만들 때 가장 널리 사용되는 위젯 중 하나입니다. 여러 위젯을 세로 또는 가로로 스크롤할 수 있는 목록 형태로 표시할 수 있어 유용합니다.

ListView의 종류

ListView() 기본 생성자: 모든 항목을 한 번에 렌더링하므로 적은 수의 항목을 표시할 때 적합합니다.

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

ListView.builder(): 동적으로 생성된 많은 수의 항목을 효율적으로 렌더링할 때 사용됩니다. itemBuilder를 사용하여 필요할 때마다 항목을 생성하므로 메모리 사용이 효율적입니다.

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

ListView.separated(): 항목 사이에 구분자를 삽입할 때 사용됩니다. separatorBuilder를 통해 각 항목 사이의 위젯을 정의할 수 있습니다.

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
  separatorBuilder: (context, index) => Divider(),
)

ListView.custom(): 사용자 정의 SliverChildDelegate를 사용하여 고급 사용자 지정 목록을 생성할 수 있습니다.

ListView의 주요 속성

• scrollDirection: Axis.vertical 또는 Axis.horizontal을 사용하여 세로 또는 가로 스크롤을 설정할 수 있습니다.
• reverse: true로 설정하면 스크롤 방향을 반대로 할 수 있습니다.
• shrinkWrap: 컨테이너의 크기에 맞게 ListView의 크기를 조절합니다.
• physics: 스크롤 동작(예: BouncingScrollPhysics, ClampingScrollPhysics)을 제어합니다.

예제 코드: 가로로 스크롤되는 ListView

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      margin: EdgeInsets.all(10),
      width: 100,
      color: Colors.blue,
      child: Center(
        child: Text('Item $index', style: TextStyle(color: Colors.white)),
      ),
    );
  },
)