[flutter] 33... ListView 스크롤 제어하기(animateTo, horizontal date picker)

플러터로 간단한 To-Do 앱을 하나 만드려고 한다.

이앱은 켈린더를 이용하기에 먼저 구현중인데..

사진과 같이 좌우 스크롤로 날짜를 고를 수 있는 영역을 구현중이다.

사진과 같이 완벽하게 따라하진 못하겠지만

나 나름대로의 방법대로 구현해봤다.

 

 

date를 눌르때마다

앞뒤로 총 해당 월의 일수(31개) 만큼 나오며

캘린더를 눌렀을 시엔

빠르게 년, 월, 일 선택 가능하다.

화면 기록 2023-01-31 오후 4.14.20.mov

0.62MB

 

구현하는데 다소 어려웠던 점이 있다면

사용자가 date를 눌렀을때

해당 date가 화면 정가운데(리스트 한가운데)에 위치하여 스크롤을 제어할수있게 하는것이였다.

완벽하게 구현된것은 아니나

내가 짠 방법을 공유하도록 하겠다.

 

먼저 ListView에 Controller를 등록시켜준뒤

Controller.animateTo를 이용하면 된다.

scrollController.animateTo(
                (scrollController.position.viewportDimension +
                        scrollController.position.maxScrollExtent) *
                    13 /
                    31,
                duration: const Duration(seconds: 1),
                curve: Curves.ease);

쉽게 풀어 설명하자면

스크롤 영역을 감지하여

31개 리스트중 13번째 리스트를 화면 맨 앞에 위치하는것이다.

사진을 보면 이해가 빠르다.

맨 앞쪽에 위치한 Sun 12 리스트가 바로 13번째

리스트이다.

물론 나는 15번째 리스트인 Tue 14를 픽했다.