[Flutter] ListView.builder 를 사용할 때 고려해야 하는 점

ListView.builder를 사용할 때 화면의 공간을 효과적으로 확보하고 렌더링에 문제를 최소화하기 위해 몇 가지 주의 사항이 있습니다. 아래는 주의해야 할 사항들에 대한 간단한 정리입니다.

1. CustomScrollView 활용:
   • ListView.builder를 사용할 때는 가능하면 CustomScrollView 안에서 사용하는 것이 좋습니다. CustomScrollView는 여러 개의 다른 scrollable 위젯을 함께 사용할 수 있도록 해주어 효과적인 렌더링을 도와줍니다.

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return YourListItem(index);
        },
        childCount: itemCount,
      ),
    ),
  ],
)

2. SingleChildScrollView 사용에 주의:
   • ListView.builder를 SingleChildScrollView 안에서 사용하지 않도록 주의해야 합니다. 이는 성능에 부정적인 영향을 미칠 수 있습니다.

// 좋은 예
CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return YourListItem(index);
        },
        childCount: itemCount,
      ),
    ),
  ],
)

// 나쁜 예
SingleChildScrollView(
  child: Column(
    children: List.generate(
      itemCount,
      (index) => YourListItem(index),
    ),
  ),
)

3. Padding 주의:
   • ListView.builder를 사용할 때 불필요한 Padding을 피하십시오. ListView.builder 자체가 패딩을 관리하므로 중복된 패딩을 피하고 성능을 향상시킵니다.

// 좋은 예
ListView.builder(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  itemBuilder: (BuildContext context, int index) {
    return YourListItem(index);
  },
  itemCount: itemCount,
)

// 나쁜 예
Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: ListView.builder(
    itemBuilder: (BuildContext context, int index) {
      return YourListItem(index);
    },
    itemCount: itemCount,
  ),
)

4. Column, Row, Stack 사용에 주의:
   • ListView.builder를 Column, Row, 또는 Stack 안에 직접 넣는 것은 피해야 합니다. 이는 성능 문제를 유발할 수 있습니다.

// 좋은 예
CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return YourListItem(index);
        },
        childCount: itemCount,
      ),
    ),
  ],
)

// 나쁜 예
Column(
  children: [
    YourHeaderWidget(),
    ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return YourListItem(index);
      },
      itemCount: itemCount,
    ),
    YourFooterWidget(),
  ],
)

5. 데이터 양 주의:
   • 만약 많은 아이템을 표시해야 하는 경우, ListView.builder의 itemBuilder에서는 최대한 가볍게 처리하도록 노력해야 합니다. 무거운 연산은 필요한 경우 비동기로 처리하거나 페이지네이션을 고려해야 합니다.

ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    // 무거운 연산 피하기
    // 비동기 처리 또는 페이지네이션 고려
    return YourListItem(index);
  },
  itemCount: itemCount,
)

이러한 주의 사항을 지키면서 ListView.builder를 사용하면 성능을 최적화하고 렌더링에 문제를 피할 수 있습니다.