[flutter] 플러터(Flutter)에서 스크롤 이벤트(Scroll Event) 처리하기

플러터(Flutter)는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로, 여러 플랫폼에서 동작하는 사용자 인터페이스(UI)를 빠르고 쉽게 구축할 수 있습니다. 스크롤 이벤트 처리는 플러터 앱에서 매우 중요한 기능 중 하나이며, 사용자가 화면을 스크롤할 때마다 특정 동작을 수행하고 싶을 때 사용됩니다.

ScrollController 사용하기

플러터에서 스크롤 이벤트를 처리하기 위해 ScrollController를 사용할 수 있습니다. ScrollController 객체를 생성한 후, 스크롤 가능한 위젯에 이 컨트롤러를 연결하여 사용합니다.

ScrollController _controller = ScrollController();

@override
void initState() {
  super.initState();
  _controller.addListener(_scrollListener);
}

@override
void dispose() {
  _controller.removeListener(_scrollListener);
  _controller.dispose();
  super.dispose();
}

void _scrollListener() {
  if (_controller.position.pixels == _controller.position.maxScrollExtent) {
    // 스크롤이 맨 아래로 도달했을 때 수행할 동작
    // 예: 추가 데이터 로딩
  }
}

위 코드에서 _scrollListener 함수는 스크롤 이벤트가 발생했을 때 호출되는 콜백 함수입니다. 이 함수에서 스크롤 위치를 확인하여 원하는 동작을 수행할 수 있습니다. 위 코드에서는 스크롤이 맨 아래로 도달했을 때 추가 데이터를 로딩하는 동작을 예로 들었습니다.

주의할 점은 ScrollControllerinitState에서 생성하고 dispose에서 해제해야 한다는 것입니다. initState는 위젯의 생명 주기에서 처음 상태가 생성될 때 호출되는 함수이며, dispose는 위젯이 삭제될 때 호출되는 함수입니다.

ListView와 스크롤 이벤트 처리하기

ListView는 플러터에서 스크롤 가능한 목록을 만들 때 자주 사용되는 위젯입니다. ListView.builder를 사용하여 동적으로 목록을 생성할 수 있으며, 스크롤 이벤트도 쉽게 처리할 수 있습니다.

ScrollController _controller = ScrollController();

@override
void initState() {
  super.initState();
  _controller.addListener(_scrollListener);
}

@override
void dispose() {
  _controller.removeListener(_scrollListener);
  _controller.dispose();
  super.dispose();
}

void _scrollListener() {
  if (_controller.position.pixels == _controller.position.maxScrollExtent) {
    // 스크롤이 맨 아래로 도달했을 때 수행할 동작
    // 예: 추가 데이터 로딩
  }
}

Widget build(BuildContext context) {
  return ListView.builder(
    controller: _controller,
    itemCount: _data.length,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text(_data[index]),
      );
    },
  );
}

위 코드는 ListView.builder를 사용하여 동적으로 목록을 생성하고, _scrollListener 함수를 이용하여 스크롤 이벤트를 처리하는 예시입니다. ListView.builderitemCountitemBuilder 매개변수를 필요로 하며, _data는 데이터 배열로 표시되는 항목을 제어합니다.

이렇게 ScrollControllerListView를 함께 사용하여 플러터 앱에서 스크롤 이벤트를 처리할 수 있습니다.

참고 자료