Scrollbar bouncing 막기

다음과 같은 Scrollbar이 있는 ListView를 구현할 때 다음과 같은 문제가 발생할 수 있다.

ListView의 시작과 끝부분에서 드래그를 했을때 다음과 같이 UI가 원하지 않게 움직이게 된다.

이를 해결할 방법으로 두가지가 있다.

1. ListView의 Physics 설정

ListView.builder(
   shrinkWrap: true,
   physics : ClampingScrollPhysics(),
   itemBuilder: (_, index) => ListTile(
   title: Text("index: $index"),
   ),
                ),

• physics 설정을 통해 scroll의 특성을 변경 가능하다.
  • ClampingScrollPhysics() - Android 기본 설정 값,시작과 끝을 도달 했을때 효과를 보여줌
  • BouncingScrollPhysics() - IOS의 기본 세팅과 유사, List의 끝에 도달했을 때 bouncing

ListView - physics에 관한 자세한 설명 : 링크텍스트

2. GestureDetector을 통한 스크롤 제어

 @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          changePosition(notification);

          return true;
        },
        child: Widget(),
        );
        }
        
changePosition(ScrollNotification notification) {
    if (isDragInProcess) {
      return;
    }

    setState(() {
      if (notification is ScrollUpdateNotification) {
        if(notification.metrics.outOfRange){
        }else{
        }
        }
      }
    );
  }

• 스크롤 제어하고 싶은 위젯에 NotificationListener 적용
• isDragInProcess라는 변수를 통해 사용자가 스크롤중인지 확인
• changePosition 함수에 있는 notification의 속성값들을 다음과 같이 있다
  - notification.metrics.outOfRange : 스크롤하는 구역이 최상단 / 최하단일 경우(위의 사진과 같이) -> return true / else return false
  - notification.scrollDelta : 스크롤한 위젯이 얼마나 이동을 하는가에 대한 Value 반환(double)
  - notification.metrics.atEdge : 위젯의 위치가 구역의 위 또는 아래에 있는지에 대한 bool값 반환
  - notification.dragDetails : 사용자가 위젯 스크롤 했을때 x축과 y축방향으로 얼마나 했는지 반환 (offset)
• notification.metrics.outOfRange가 false 일때 원하는 움직임을 else{}에를 작성해주면 된다.