[flutter] 플러터 Slider를 사용하여 사용자 정의 애니메이션 효과 구현하는 방법은?

08 Dec 2023

flutter

1. Slider 위젯 생성

먼저, Slider 위젯을 생성하여 화면에 표시합니다. 아래는 Slider를 생성하는 간단한 예시 코드입니다.

Slider(
  value: _currentValue,
  min: 0,
  max: 100,
  onChanged: (double value) {
    // 애니메이션 효과 처리
    setState(() {
      _currentValue = value;
    });
  },
)

위 코드에서 _currentValue는 Slider의 현재 값이고, onChanged() 콜백 함수에서 새로운 값으로 업데이트합니다.

2. 애니메이션 구현

Slider의 값이 변경될 때마다 애니메이션을 적용하려면 AnimationController와 Tween을 사용하여 애니메이션을 관리해야 합니다. 아래는 AnimationController와 Tween을 활용한 애니메이션 설정 예시입니다.

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: Duration(milliseconds: 500),
    vsync: this,
  );
  _animation = Tween<double>(begin: 0, end: _currentValue).animate(_controller)
    ..addListener(() {
      setState(() {
        _currentValue = _animation.value;
      });
    });
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

위 코드에서는 Slider의 값 변화에 따라 _currentValue를 제어하는 _animation을 설정하고, 이를 addListener()를 통해 화면에 반영합니다. 또한, dispose() 메소드에서는 애니메이션 컨트롤러를 정리합니다.

이제 Slider의 값이 변경될 때마다 원하는 사용자 정의 애니메이션 효과를 쉽게 구현할 수 있게 됩니다.

플러터 애니메이션 및 Slider에 대한 더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.