[Flutter] ListView.builder에 대한 이슈 정리 (feat. Padding , 안드로이드 OS 환경)

플러터에서 ListView.builder라는 위젯이 있다.

보통 앱 화면에서 하나의 영역을 여러번 효율적으로 사용하는 위젯이라고 생각하면 편하다.

이걸 사용해서 앱을 개발하는 와중 padding 영역 때문에 발생한 이슈에 대해 공유하고자 한다.

ListView.builder란?

• ListView.builder는 많은 수의 아이템을 효율적으로 표시하는 데 사용되는 중요한 위젯
• 화면에 보이는 아이템만 렌더링하여 메모리 사용량을 줄이고, 스크롤 성능을 향상시키는 장점

ListView.builder 기본 사용법

• ListView.builder는 리스트 아이템을 동적으로 생성하며, 다음 두 가지 필수 속성을 가진다.
• itemCount: 리스트에 표시할 총 아이템 수를 지정한다.
• itemBuilder: 각 아이템을 생성하는 함수로, BuildContext와 index를 매개변수로 받아 해당 인덱스의 위젯을 반환한다.
• items는 리스트에 표시할 데이터 소스이며, itemBuilder는 각 아이템을 ListTile 위젯으로 생성한다.

ListView.builder 구현 예시

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

ListView.builder의 Padding관련 이슈

• 안드로이드 기기에서 ListView.builder 바텀에 패딩 영역이 차이가 나는 이슈이다.
• 안드로이드 OS가 10인 기기와 15인 기기에서 다르게 적용되는것이 핵심.
• OS가 10인 기기에서는 패딩 영역이 없는데 , 15인 기기에서는 패딩 영역이 생기다 보니 화면에서 보이는 영역이 차이가 발생한 것이다.
• ListView.builder에 padding 속성때문에 발생한 이슈였다.
• padding이 디폴트값으로 바텀에 20 적용이 되었는데 , OS가 10인 기기에서는 적용이 되지 않은 것.
• 결론은 padding 바텀 영역에 일정 값(0.1)을 주면 해결이 가능하다.

예시 코드

ListView.builder(
  padding: const EdgeInsets.only(bottom: 0.1), // 리스트 전체에 패딩 적용
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)