[Flutter] NotificationListener로 스크롤 위치 추적하기 (무한 스크롤 등)

sangh518·2022년 4월 5일
0

짧은 기록

목록 보기
5/12
post-thumbnail

ListViewSingleChildScrollView와 같이ScrollView를 상속해 스크롤이 가능한 위젯들을 사용하는 경우, 무한 스크롤 구현 등을 위해 현재 스크롤 위치를 추적할 때가 많다.

일반적인 방법으로는 ScrollController를 사용해 아래와 같이,

var scrollController = ScrollController();

scrollController.addListener(() {
	print(scrollController.position);
});

ScrollController.addListener를 통해 스크롤 이벤트를 등록하고 위치를 추적할 수 있다.

하지만 NestedScrollView와 같이 PrimiaryScrollController를 사용하고 있어 직접 생성한 ScrollController를 사용하기 어려운 경우, 위의 방법을 사용할 수 없기 때문에 다른 방법으로 이벤트를 구현해야한다.

이 때 사용할 수 있는 것이 NotificationListener다. ScrollView 위젯을 NotificationListener로 감싸면 스크롤 이벤트를 받을 수 있다.

return NotificationListener(
  child: ListView(
    children: [Text('A'), Text('B'), Text('C')],
  ),
  onNotification: (scrollNotification) {
    //스크롤 시 이 부분에서 이벤트가 발생한다.
    return false;
  },

onNotificationScrollNotification을 인자로 넘겨주며, 이 인자를 사용해 현재 위치 등을 구할 수 있다.

  bool _onScrollNotification(ScrollNotification scrollNotification) {
  	
    var metrics = scrollNotification.metrics;

	//세로 스크롤인 경우에만 추적
    if (metrics.axisDirection != AxisDirection.down) return false;
    if (metrics.extentAfter <= 0) {
      //스크롤 끝에 닿은 경우 실행
    }
    return false;
  }

다만 하위 트리에 있는 모든 ScrollView의 이벤트를 받기 때문에 만약 여러 스크롤 가능한 위젯을 중첩하여 사용하는 경우, metrics.axisDirection 등을 사용하여 방향을 체크하고 사용할 필요가 있다.

profile
'문토' 앱 클라이언트 개발자(Flutter, Unity), 5년차

0개의 댓글