Flutter는 화면에 보여지는 모든 요소가 위젯으로 구성되어 있습니다.
그 중에서도 화면에 출력되는 시각적 구성 요소를 다루는 위젯을 View 위젯이라고 합니다.
📜 ListView - 세로로 쭉 나열되는 리스트
- ListView는 스크롤 가능한 위젯 목록을 표시하는데 사용됩니다.
- 가로/세로 스크롤 할 수 있는 긴 항목 목록을 만드는 데 사용할 수 있고,
채팅 화면, 게시판, 쇼핑 목록 등에서 흔하게 사용됩니다.
📌 자주 사용되는 ListView 위젯의 옵션
1. scrollDirection
- scrollDirection 옵션은 Axis enum 타입의 값을 지정해야 하며 horizontal 과 vertical 두 가지를 설정할 수 있습니다.
- 기본값은 세로(Axis.vertical)입니다.
2. reverse
- 스크롤 방향을 반대로 정렬한다는 뜻입니다.
- 기본 값은 false이며 true로 설정할 경우 가장 마지막에 배치된 것이 가장 위로 보이게 됩니다.
ㄴ 보통 채팅 앱에서 최신 데이터가 가장 밑에 보이는 것이 reverse 옵션을 true 설정한 것입니다.
//ListView 옵션 reverse 예 reverse: true,
3. controller
- controller 옵션에 등록할 ScrollController 클래스를 통해서
원하는 스크롤 위치로 이동하게 하거나
현재 스크롤링 되고 있는 위치를 실시간으로 전달받는 등의 이벤트 처리를 할 수 있습니다.
- 보통 controller 없이 등록을 하여 사용하지만,
특정 요구사항이나 무한 스크롤링의 경우
마지막 스크롤 위치에서 다음 페이지를 호출하게 하기 위한 이벤트 처리를 scrollController를 등록하여 처리할 수 있습니다.
4. physics
- physics 옵션은 ListView 위젯에서 스크롤 동작을 결정하는 속성입니다.
이 속성을 통해 스크롤 동작을 커스터마이즈하여 사용자가 앱에서 더 나은 스크롤 경험을 할 수 있습니다.
- physics 옵션에 들어갈 수 있는 다양한 효과의 경우 다음과 같이 정리할 수 있습니다.
1) BouncingScrollPhysics
- 스크롤 범위가 내부 콘텐츠보다 큰 경우 스크롤 끝에서 반사 효과를 제공합니다. (iOS 스크롤 동작과 유사)
2) ClampingScrollPhysics
- 스크롤 범위가 내부 컨텐츠보다 클 때 끝에서 반사 효과 대신 스크롤을 클램핑합니다. (Android 스크롤 동작과 유사)
3) FixedExtentScrollPhysics
- 모든 아이템이 동일한 크기를 가지는 경우 사용되고 스크롤을 균일한 단위로 이동합니다.
4) NeverScrollableScrollPhysics
- 스크롤이 비활성화된 상태입니다.
5. padding
- 리스트 뷰 내부에 padding을 통해 간격을 설정 할 수 있습니다.
6. cacheExtent
- ListView 위젯에서 cacheExtent 옵션은 리스트 뷰에서 양쪽 방향으로 스크롤 할 때
캐시 할 수 있는 추가적인 영역을 정의하는 속성입니다. (캐시 된 아이템은 스크롤 시 더 빠르게 로드됨)
ㄴ 예) cacheExtent를 1000.0으로 설정하면, 사용자가 리스트 뷰의 하단으로 스크롤 할 때 1000.0 높이의 캐시가 생성되고,
이는 다음에 사용자가 상단으로 스크롤 할 때, 이전에 캐시 된 아이템이 즉시 로드되어 보여줄 수 있습니다.
- cacheExtent 속성은 리스트 뷰의 성능을 향상시키는 데 도움이 됩니다.
그러나 이 값이 너무 크면 리스트 뷰를 초기화할 때 시간이 오래 걸리기도 합니다.
따라서 적절한 cacheExtent 값은 리스트 뷰의 크기와 컨텐츠 양에 따라 달라집니다.
'춘기IT > 춘기개발' 카테고리의 다른 글
Flutter View 위젯 - TabController / TabBar / TabBarView (1) | 2025.06.20 |
---|---|
Flutter View 위젯 - GridView (0) | 2025.06.19 |
Flutter View 위젯 - PageView (0) | 2025.06.19 |
Flutter 라이프 사이클 이해하기 (1) | 2025.06.18 |
Flutter 기본 위젯: StatelessWidget / StatefulWidget 비교 (0) | 2025.06.18 |