[Flutter] 실시간 스크롤 offset 알아보기

✍ 실시간 스크롤 offset 알아보기

사용자가 스크롤 위젯을 스크롤할 때마다 얼마큼 스크롤 됐는지 알고 싶을 때가 있다. 이럴 때 ScrollController 를 사용하여 리스너를 추가해 주면 된다. 스크롤 위젯은 controller 인자가 있는 위젯이면 가능하다. (ex. ListView, GridView, CustomScrollView 등)

 

 

원하는 스크롤 뷰의 controller 인자에 미리 선언한 scrollController 를 넣고 addListener 함수로 리스너 함수를 선언해 주면 scrollController.offset 값으로 현재 스크롤 값을 알 수 있다. 위젯이 사라지기 전에 removeListener 와 dispose 를 해주는 것도 하면 안전하게 ScrollController 를 제거할 수 있다.

import 'package:flutter/material.dart';

class ScrollControlView extends StatefulWidget {

  ScrollControlView({Key? key}) : super(key: key);

  @override
  State<ScrollControlView> createState() => _ScrollControlViewState();
}

class _ScrollControlViewState extends State<ScrollControlView> {
  final scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    scrollController.addListener(scrollListener);
  }

  @override
  void dispose() {
    scrollController.removeListener(scrollListener);
    scrollController.dispose();
    super.dispose();
  }

  scrollListener() {
    print("스크롤 offset : ${scrollController.offset}");
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      physics: BouncingScrollPhysics(),
      controller: scrollController,
      children: List.generate(
        100,
        (index) => ListTile(
          title: Text("item ${index}"),
        ),
      ),
    );
  }
}