SnapList는 리스트의 부드러운 스냅 동작을 가능하게 하는 가벼운 Flutter 패키지입니다. 사용자가 항목을 스크롤할 때 가장 가까운 항목 경계로 자동으로 스냅되도록 해줍니다. 이미지 갤러리나 카루셀과 같은 인터페이스에서 스크롤 중 정확한 정렬과 시각적 피드백을 제공함으로써 사용자 경험을 향상시킵니다. 단순성에 초점을 맞춰 설계되어, 복잡한 설정 없이 기존 리스트 구조에 쉽게 통합될 수 있습니다. 직관적이고 터치 친화적인 리스트 상호작용을 만들기에 이상적입니다.
사용 사례
이미지 캐러셀
스크롤 가능한 제품 그리드
인터랙티브 슬라이더
온보딩 화면
수직/수평 스냅 목록
주요 기능
부드러운 스냅 애니메이션
사용자 정의 가능한 스냅 간격
최소 설정
수직 및 수평 스크롤링 둘 다 지원
내장된 정렬 옵션
적합한 대상
인터랙티브 리스트 UI를 구축하는 개발자
제스처 기반 탐색에 집중하는 디자이너
이미지 중심 콘텐츠를 가진 앱
터치 입력을 갖춘 모바일 우선 애플리케이션
고려 사항
기본적인 스냅 로직에 제한됨
내장된 페이지네이션 표시기 없음
수동으로 스크롤 이벤트를 처리해야 합니다
매우 큰 데이터 세트에 최적화되지 않음
사용자 정의 이징 곡선 지원 없음
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
snaplist
A small cozy library that allows you to make snappable list views.
Issues and Pull Requests are really appreciated!
Snaplist supports different and even dynamically sized children to be listed and correctly snapped.
Showcase
Include to your project
In your pubspec.yaml root add:
dependencies:snaplist:^0.1.8
Include
The library does provide StatefulWidget which is called SnapList.
Include the widget like this:
import 'package:snaplist/snaplist.dart';
Snaplist uses gesture detection for swiping the list, so, please, be sure that the gestures you apply to the widgets inside are not overlapping for best user experience.
Properties
There are 4 required fields:
sizeProvider is a provider of each widget size. The library will wrap each built widget to a sized box of specified size. This is required so snapping calculations will work correctly.
separatorProvider is similar to sizeProvider, but this size will be used to build the list separators.
builder works like a regular Flutter builder all of us are familiar with. It will pass you the context, current item index and some additional data.
count - Children count as in a ListView.
The data which is provided to each provider and the builder is a combination of three fields:
center - is the position which is now displayed and referenced as the center widget.
next - is the position which the user is scrolling to. It is -1 if idle.
progress - is the scroll and snip progress. The values are from 0 to 100.
Snaplist defaults to horizontal scrolling. You can set axis to Axis.vertical for vertical scrolling.