(Flutter) ListView Widget

Flutter 앱을 개발하면서 가장 자주 사용 되는 UI 요소 중 하나가 바로 스크롤 가능한 리스트, ListView 입니다.

📌 ListView란?

ListView는 Flutter에서 수직 혹은 수평으로 스크롤 가능한 리스트 뷰를 제공하는 위젯 입니다. 빌더 패턴을 활용해 동적으로 아이템을 생성할 수 있습니다.

🧱 ListView의 주요 생성자

1. ListView()

• 고정된 children 리스트를 직접 전달.
  • 단점: 많은 항목이 있으면 성능 저하 발생 (모든 위젯을 메모리에 생성)

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

(결과)

2. ListView.builder()

• 스크롤할 때마다 위젯을 생성하는 방식으로 성능에 유리.
• 항목이 많거나 동적으로 생성되는 경우에 필수.

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

(결과)

3. ListView.separated()

• 각 항목 사이에 구분선이나 위젯을 넣고 싶을 때 사용.

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  separatorBuilder: (context, index) => Divider(), // 구분선
)

(결과)

4. ListView.custom()

• 고급 커스터마이징이 필요한 경우 사용.
• SliverChildDelegate를 통해 직접 동작 방식 정의 가능.

📏 주요 속성

속성	설명
scrollDirection	기본은 Axis.vertical. 수평 스크롤은 Axis.horizontal로 설정
reverse	true로 설정 시 리스트의 순서를 반대로
controller	스크롤을 제어하기 위한 ScrollController 연결
shrinkWrap	true로 설정하면 남은 공간만 차지 (Nested Scroll 시 유용)
physics	스크롤 동작 제어 (BouncingScrollPhysics, NeverScrollableScrollPhysics 등)

🧠 주의할 점 & 팁

✅ 성능 최적화

• 많은 항목이 있을 경우에는 반드시 ListView.builder() 사용.
• shrinkWrap: true는 필요한 경우에만, 일반 상황에선 성능 저하 가능 (예: 다른 스크롤 뷰 안에 ListView 포함할 때).
• physics: NeverScrollableScrollPhysics() 로 스크롤 비활성화 가능.

✅ 자동 스크롤 위치 유지

• controller를 사용해 스크롤 위치 제어 가능.
  • 예: ScrollController, jumpTo(), animateTo() 등 활용.