Slider

Flutter에서 사용자로부터 특정 범위 내의 값을 입력받아야 할 때 Slider 위젯을 사용할 수 있다.

Slider를 사용하면 터치나 드래그를 통해 연속적인 값을 직관적으로 선택할 수 있어 사용자 경험을 향상시킬 수 있다. 

 

 

Slider 기본 사용법

Slider 위젯을 사용하려면 StatefulWidget에서 선언해주어야 한다. 왜냐하면 슬라이드를 하면 특정 범위 내의 값들이 매순간 바뀌기 때문이다.

Slider 위젯을 사용할 때, min, max, value 속성은 필수로 지정해야 한다.

코드 설명: 

 

• _currentValue 변수를 선언하고 초기값을 0으로 설정한다.
• 이 변수는 슬라이더의 현재 값을 저장하는 데 사용된다.

 

• value 속성은 슬라이더의 현재 값을 지정한다.
• _currentValue 변수의 값을 할당하여 슬라이더의 초기 위치를 설정한다.

 

• onChanged는 슬라이더 값이 변경될 때마다 호출되는 콜백 함수이다.
• 함수의 인자로 변경된 값 value를 받는다.

 

• setState 함수를 호출하여 슬라이더 값이 변경되었음을 Flutter 프레임워크에 알린다.
• setState 내부의 코드가 실행되면 위젯이 다시 빌드되어 UI가 업데이트된다.
• 콜백 함수 내부에서 _currentValue 변수에 변경된 value 값을 할당한다.
• 이렇게 하면 슬라이더를 움직일 때마다 _currentValue가 실시간으로 업데이트된다.

이 코드는 min 0부터 max 100까지의 범위를 가지는 가장 기본적인 형태의 Slider를 생성한다.

사용자가 슬라이더를 조작할 때마다 onChanged 콜백이 호출되고, setState를 통해 _currentValue를 업데이트하여 슬라이더의 현재 값을 반영한다.

실행 결과: 

 

 

슬라이더 모양 커스터마이징

Slider의 모양은 다양한 속성을 통해 커스터마이징할 수 있다.

 

• activeColor: 슬라이더의 선택된 부분 색상
• inactiveColor: 슬라이더의 선택되지 않은 부분 색상
• thumbColor: 슬라이더 썸(thumb)의 색상
• divisions: 슬라이더를 분할할 구간 수. null일 경우 연속적인 값 선택 가능

 

실행 결과: 

 

 

슬라이더 크기 조절

SliderTheme을 사용하면 슬라이더의 전체적인 크기를 조절할 수 있다.

SliderThemeData에서 trackHeight, thumbShape, overlayShape 등 다양한 속성을 설정할 수 있다.

실행 결과: 

 

 

Slider 활용 예제

Slider는 다양한 곳에 활용될 수 있다.

예를 들어 오디오 플레이어의 재생 위치를 조절하거나, 이미지 편집기에서 효과의 강도를 조절할 때 직관적인 방식으로 사용될 수 있다.

 

또한 Slider를 사용해 설정 화면에서 사용자 기본 설정값을 조정하는 데에도 유용하다.

폰트 크기, 볼륨, 밝기 등을 Slider로 쉽게 제어할 수 있다.