[flutter] 플러터 Slider의 스타일을 커스터마이즈하는 방법은?
플러터의 Slider 위젯은 사용자가 값을 선택할 수 있는 컴포넌트입니다. 플러터는 Slider의 스타일을 커스터마이즈할 수 있는 다양한 방법을 제공합니다. 여기에서는 이를 적용하는 방법을 알아보겠습니다.
1. Slider 테마 적용
Slider의 테마를 설정하여 스타일을 변경할 수 있습니다. 예를 들어, SliderTheme 위젯을 사용하여 active 및 inactive 상태의 컬러, 두께 및 모양을 변경할 수 있습니다.
SliderTheme(
data: SliderThemeData(
activeTrackColor: Colors.red, // 활성화된 슬라이더의 색상
inactiveTrackColor: Colors.grey, // 비활성화된 슬라이더의 색상
trackHeight: 8.0, // 슬라이더 트랙의 높이
thumbColor: Colors.blue, // 슬라이더의 버튼 색상
overlayColor: Colors.blue.withAlpha(32), // 버튼을 눌렀을 때의 오버레이 색상
),
child: Slider(
value: _currentValue,
onChanged: (double value) {
setState(() {
_currentValue = value;
});
},
min: 0.0,
max: 100.0,
),
)
2. Slider 커스터마이즈
Slider를 직접 커스터마이즈하여 사용자 정의 스타일을 적용할 수도 있습니다. Slider의 thumbShape 및 overlayShape 속성을 이용하여 슬라이더의 모양을 변경할 수 있습니다.
Slider(
value: _currentValue,
onChanged: (double value) {
setState(() {
_currentValue = value;
});
},
min: 0.0,
max: 100.0,
thumbColor: Colors.red, // 슬라이더 버튼의 색상
overlayColor: Colors.red.withAlpha(32), // 버튼 눌렀을 때의 오버레이 색상
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0), // 슬라이더 버튼의 모양
overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0), // 오버레이의 모양
)
참고: 위 코드에서 RoundSliderThumbShape 및 RoundSliderOverlayShape는 내장된 슬라이더 모양 클래스입니다. 이것들을 사용하여 슬라이더의 외형을 쉽게 변경할 수 있습니다.
Slider의 스타일을 커스터마이즈하는 두 가지 방법을 통해 개발자는 사용자 정의 슬라이더를 만들 수 있습니다.
더 많은 정보 및 예제는 플러터 공식 문서를 참고하시기 바랍니다.