Flutter에서 스크롤 가능한 리스트를 어떻게 만드나요?

질문

Flutter에서 스크롤 가능한 리스트를 어떻게 만드나요?

답변

Flutter에서 스크롤 가능한 리스트를 만드는 여러 방법이 있으며, 데이터 유형과 UI 요구사항에 따라 적절한 위젯을 선택할 수 있습니다.

1. ListView

ListView는 Flutter에서 스크롤 가능한 리스트를 만드는 가장 기본적인 위젯입니다.

ListView 생성자

ListView(
  children: <Widget>[
    ListTile(title: Text('항목 1')),
    ListTile(title: Text('항목 2')),
    ListTile(title: Text('항목 3')),
    // ... 더 많은 정적 항목
  ],
)

이 방법은 적은 수의 항목이 있을 때 적합합니다. 모든 항목이 한 번에 메모리에 로드됩니다.

ListView.builder

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

ListView.builder는 화면에 표시되는 항목만 빌드하므로 대량의 데이터를 효율적으로 처리할 수 있습니다.

ListView.separated

ListView.separated(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

ListView.separated는 ListView.builder와 유사하지만 항목 사이에 구분자를 추가할 수 있습니다.

2. SingleChildScrollView

단일 위젯을 스크롤 가능하게 만들려면 SingleChildScrollView를 사용할 수 있습니다.

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      // 여러 위젯들
    ],
  ),
)

이 방법은 콘텐츠가 제한적이고 고정된 경우에 적합합니다.

3. GridView

격자 형태로 항목을 표시하려면 GridView를 사용할 수 있습니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 열 수
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Card(
      child: Center(
        child: Text(items[index]),
      ),
    );
  },
)

4. CustomScrollView와 Sliver

더 복잡한 스크롤 가능한 UI를 만들려면 CustomScrollView와 Sliver 위젯을 사용할 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('스크롤 가능한 목록'),
      floating: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('항목 $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverGrid(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Container(
            color: Colors.blue[(index % 9) * 100],
            child: Center(
              child: Text('그리드 항목 $index'),
            ),
          );
        },
        childCount: 20,
      ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
      ),
    ),
  ],
)

리스트 최적화 팁

1. Lazy Loading: ListView.builder를 사용하여 필요한 항목만 로드하세요.
2. 페이지네이션: 대량의 데이터를 처리할 때 페이지네이션을 구현하세요.
3. cacheExtent: 미리 로드할 항목을 지정하세요.

   ListView.builder(
     cacheExtent: 100.0, // 화면 외부에 100픽셀 정도의 항목을 미리 로드
     // ...
   )
   

4. 항목 재사용: ListView.builder의 itemBuilder 내에서 계산 비용이 많이 드는 작업을 피하세요.
5. const 위젯: 가능한 경우 const 생성자를 사용하여 리빌드를 최소화하세요.

Flutter의 스크롤 가능한 위젯은 대부분 최적화되어 있지만, 적절한 위젯을 선택하고 베스트 프랙티스를 따르면 더 나은 성능을 얻을 수 있습니다.