[flutter] 플러터 스크롤바에 투명도 조절하기

11 Dec 2023

flutter

플러터 앱을 개발하는 동안 스크롤바의 투명도를 조절하고 싶을 때가 있습니다. 사용자가 화면을 스크롤할 때 투명한 스크롤바를 원하는 경우가 많은데, 이때는 다음과 같은 방법을 사용할 수 있습니다.

CustomScrollView와 ScrollConfiguration 사용하기

CustomScrollView(
  slivers: <Widget>[
    ScrollConfiguration(
      behavior: _CustomScrollBehavior(),
      child: SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
          childCount: 50,
        ),
      ),
    ),
  ],
)

위 코드에서 _CustomScrollBehavior는 스크롤바의 투명도를 조절하기 위한 사용자 정의 behavior를 나타냅니다. 이때 behavior를 정의하여 원하는 투명도를 설정할 수 있습니다.

class _CustomScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    return child;
  }

  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {
    return ClampingScrollPhysics();
  }

  @override
  Widget buildOverscrollIndicator(
      BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }
}

_CustomScrollBehavior 클래스에서 투명도를 조절하기 위해 buildViewportChrome 메서드를 오버라이드합니다. 거기에 투명도를 조절하는 로직을 추가하여 사용하시면 됩니다.

플러터에서 스크롤바의 투명도를 조절하는 방법은 이렇게 간단합니다. 다양한 기능을 적용하여 사용자가 더 편리하게 화면을 스크롤할 수 있도록 개선할 수 있습니다.

CustomScrollView와 ScrollConfiguration 사용하기

참고 자료