[flutter] 스크롤바 색상 변경 방법

11 Dec 2023

flutter

Flutter 애플리케이션에서 스크롤바의 색상을 변경하는 방법에 대해 배워보겠습니다.

1. 스크롤바를 가진 위젯 추가

먼저, Scrollbar 위젯을 사용하여 스크롤바가 있는 화면을 생성합니다. 이 위젯은 터치 인식 가능한 스크롤 바를 표시하여 스크롤링을 보다 쉽게 만들어 줍니다.

Scrollbar(
  child: SingleChildScrollView(
    // 스크롤 가능한 컨텐츠
  ),
)

2. 스크롤바 색상 변경

Scrollbar 위젯의 스크롤바를 색상을 변경하려면 material 패키지의 Scrollbar의 thumb 속성을 이용합니다. 스크롤바의 색상을 변경하려면 해당 테마에 따라 ThemeData를 수정합니다.

Scrollbar(
  child: SingleChildScrollView(
    // 스크롤 가능한 컨텐츠
  ),
  isAlwaysShown: true,
  controller: _scrollController,
  thickness: 8.0,
  radius: Radius.circular(8.0),
  hoverThickness: 10.0,
  radiusWhileDragging: Radius.circular(10.0),
  showTrackOnHover: true,
  interactive: true,
  scrollbarTheme: ScrollbarThemeData(
    thumbColor: MaterialStateProperty.all(Colors.yellow), // 스크롤바 색상 변경
  ),
)

위 코드에서 thumbColor 속성을 사용하여 스크롤바의 색상을 변경할 수 있습니다.

이제 Flutter 애플리케이션에서 스크롤바의 색상을 변경하는 방법에 대해 알아보았습니다.

1. 스크롤바를 가진 위젯 추가

2. 스크롤바 색상 변경

참고 자료