[Flutter 라이브러리 소개]스크롤 리스트에서 아이템이 중간 위치부터 시작하기

당근마켓에서 함께해요 페이지에 들어가면 날짜를 선택할 때 아래와같이 중간부터 아이템이 위치해서 스크롤하는 리스트뷰를 만들고 싶을때가 있다.

이때 scroll_snap_list를 사용하면 된다. scroll_snap_list는 ListView에서 사용자의 스크롤이 끝날 때 항목에 대한 "snaping" 이벤트를 허용하는 위젯이다.

이 위젯은 무제한 스크롤을 허용한다(한 번에 왼쪽/오른쪽 이웃에만 "스냅"할 수 있는 다른 위젯과 달리).

수평 및 수직 목록 지원
이 위젯을 사용하여 다음을 달성할 수 있습니다.

설치법
dependencies:
  scroll_snap_list: ^0.9.1

임포트 방법
import 'package:scroll_snap_list/scroll_snap_list.dart';

사용법
Expanded(
  child: ScrollSnapList(
    onItemFocus: _onItemFocus,
    itemSize: 35,
    itemBuilder: _buildListItem,
    itemCount: data.length,
    reverse: true,
  ),
),

아래 처럼 코드를 작성하면 위에 화면처럼 만들수 있다.

  ScrollController photoController = ScrollController();
  GlobalKey<ScrollSnapListState> sslKey = GlobalKey();
  
 ScrollSnapList(
                          onItemFocus: _onItemFocus,
                          listController: photoController,
                          itemSize: 50,
                          key: sslKey,
                          itemBuilder: (ctx, idx) {
                            return GestureDetector(
                              onTap: () {
                                if (sslKey.currentState != null) {
                                  sslKey.currentState!.focusToItem(idx);
                                  photoData = widget.photoDatList[idx];
                                }
                              },
                              child: Container(
                                width: 50,
                                height: 50,
                                margin: EdgeInsets.only(right: 10),
                                decoration: BoxDecoration(
                                    border: idx == _focusedIndex
                                        ? Border.all(
                                            color: Colors.red, width: 3)
                                        : Border()),
                                child: Image.network(
                                  widget.photoDatList[idx],
                                  fit: BoxFit.cover,
                                ),
                              ),
                            );
                          },
                          itemCount: widget.photoDatList.length,
                          dynamicItemSize: false,
                          // dynamicSizeEquation: customEquation, //optional
                        ),