Flutter 기초 - Slider (19)

 

Flutter 기초 - Slider  (19)

 

1. Slider

 - Slider Widget은 사용자에게 시각적인 피드백을 제공하면서 값의 범위를 조정할 수 있는 인터페이스를 제공한다. 

value	현재의 슬라이더 값으로 min, max의 사이어야 한다.
onChanged	슬라이더를 움직일때 호출되는 콜백함수로 조작시 현재 슬라이더 값이 전달된다.
min, max	슬라이더의 최소값, 최대값
divisions	사용자가 선택할 수 있는 값의 수로 값을 설정하므로써 눈금표시와 특정 눈금에 위치시킬 수 있다.
label	사용자가 슬라이더를 조작할 때 보여줄 수 있는 텍스트 레이블로 현재 값을 표시하는데 사용된다.

 

class TestSlider extends StatefulWidget {
  const TestSlider({super.key});

  @override
  State<TestSlider> createState() => _TestSlider();
}

class _TestSlider extends State<TestSlider> {
  double _currentVolume = 20;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentVolume,
      min: 0,
      max: 100,
      divisions: 10,
      activeColor: Colors.red,
      label: _currentVolume.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentVolume = value;
        });
      },
    );
  }
}

 

TestSlider는 StateWidget 선언되어 현재 값을 기준으로 사용자의 작용에 의해 변할 수 있는 상태이다.

CreateState()메서드는 _TestSlider클래스의 인스턴스를 반환하고 이는 슬라이더의 상태를 관리하는 역할을 수행한다.

 

Slider Widget

  value : 슬라이더의 현재 값을 나타내며 _currentVolume 변수에 의해 동적으로 관리된다.

  min, max : 슬라이더에 나타낼 최소, 최대값

  division : 전체를 10으로 나누어 10단위로 조정할 수 있다.

  activeColor : 슬라이더의 색상(현재값 ~ 마지막값)

  label : 슬라이더를 조정할 때 나타나는 풍선 도움말에 현재 값의 정수 부분을 문자열로 표시한다.

  onChanged : 슬라이더의 값이 변할때마다 호출된다. 콜백 함수는 새로운 슬라이더 값(value)를 받아 _currentVolume을 업데이트하고 setState를 호출해 위젯을 다시 빌드한다.