[Flutter]오버스크롤 방지

아래로 스크롤을 했을 때, 흰화면이 보이는 이슈를 겪었다.
오버스크롤에 대해 알아보자

오버스크롤이란?

오버스크롤(OverScroll)은 사용자가 스크롤 가능한 콘텐츠의 시작점 또는 끝점을 넘어서
계속해서 스크롤을 시도할 때 발생하는 효과다.
오버스크롤은 주로 스크롤이 끝에 도달했음을 시각적으로 알려주는 역할을 하며,
사용자에게 더 이상 스크롤할 콘텐츠가 없음을 알려준다.
Flutter에서는 이 오버스크롤 효과를 다루기 위해 다양한 ScrollPhysics를 제공한다.

BouncingScrollPhysics

BouncingScrollPhysics는 iOS에서 일반적으로 볼 수 있는 오버스크롤 효과를 구현한다.
사용자가 스크롤 가능한 영역의 경계를 넘어서 스크롤을 계속하려고 할 때,
콘텐츠가 경계에서 "바운스"(통통 튀는 듯한) 되는 효과가 발생한다.
이는 사용자에게 더 자연스럽고 유동적인 사용자 경험을 제공한다.
BouncingScrollPhysics는 주로 iOS 스타일의 애플리케이션 디자인에 적합하다.
아래는 예시다.

ClampingScrollPhysics

ClampingScrollPhysics는 Android에서 일반적으로 볼 수 있는 오버스크롤 효과를 구현한다.
사용자가 스크롤 가능한 영역의 경계를 넘어서 스크롤을 시도할 때, 스크롤은 강제로 멈추고 끝부분에서 "잘림"(Clamp) 효과가 발생한다.
즉, 콘텐츠가 더 이상 넘어가지 않고 끝에서 멈춘다.
ClampingScrollPhysics는 사용자가 스크롤의 끝에 도달했음을 분명하게 알려주며, 주로 Android 스타일의 애플리케이션 디자인에 적합하다.

오버스크롤 사용 사례

사용자 경험 향상:

오버스크롤 효과는 사용자에게 스크롤 가능한 콘텐츠의 경계를 명확하게 알려주어,
사용자 경험을 향상시킬 수 있다.

플랫폼 일관성:

BouncingScrollPhysics와 ClampingScrollPhysics를 적절히 사용함으로써 iOS 또는 Android 플랫폼의 스크롤 동작과 일관성을 유지할 수 있다.
시각적 피드백: 오버스크롤 효과는 사용자에게 시각적 피드백을 제공하여,
더 이상 스크롤할 콘텐츠가 없음을 알려준다.
오버스크롤과 관련된 ScrollPhysics를 사용함으로써,
Flutter 애플리케이션에서 사용자에게 더 나은 스크롤 경험을 제공할 수 있다.

예제코드

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Scroll Physics Demo')),
        body: Column(
          children: <Widget>[
            Expanded(
              child: ListView(
                physics: BouncingScrollPhysics(), // iOS 스타일 바운싱 효과
                children: List.generate(
                  20,
                  (index) => ListTile(title: Text('Bouncing Item $index')),
                ),
              ),
            ),
            Divider(),
            Expanded(
              child: ListView(
                physics: ClampingScrollPhysics(), // Android 스타일 클램핑 효과
                children: List.generate(
                  20,
                  (index) => ListTile(title: Text('Clamping Item $index')),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}