개발노트

63. [Flutter] ValueListenableBuilder로 AnimationController value 값 Slider에 연동시키기 (with ValueNotifier) 본문

앱 개발/Flutter

63. [Flutter] ValueListenableBuilder로 AnimationController value 값 Slider에 연동시키기 (with ValueNotifier)

mroh1226 2024. 1. 31. 15:38
반응형

ValueListenableBuilder

ValueListenableBuilder는 Flutter의 위젯 중 하나로, ValueNotifier 또는 이와 유사한 클래스의 값이 변경될 때 UI를 다시 빌드합니다. 이 위젯은 주어진 ValueNotifier를 감시하고, 해당 ValueNotifier의 값이 변경될 때마다 builder 함수를 호출하여 새로운 위젯을 생성합니다.

일반적으로 ValueListenableBuilder는 다음과 같은 상황에서 사용됩니다:

  1. 값의 변화를 감시하고 UI를 업데이트할 때: 예를 들어, 애니메이션의 진행률을 나타내는 ValueNotifier를 사용하여 ValueListenableBuilder를 생성하면, 애니메이션의 진행률이 변경될 때마다 Slider나 Progress Indicator와 같은 UI 요소가 자동으로 업데이트됩니다.
  2. 단일 값에 의존하는 UI를 빌드할 때: 예를 들어, 어플리케이션의 테마나 사용자 설정을 저장하는 ValueNotifier가 있다면, 이 값이 변경될 때마다 UI의 테마나 설정을 업데이트할 수 있습니다.

ValueListenableBuilder를 사용하면 ValueNotifier의 값이 변경될 때마다 setState()를 호출할 필요가 없으며, 값이 변경될 때마다 UI가 자동으로 업데이트됩니다. 이는 코드를 더 간결하게 작성할 수 있고, Flutter 프레임워크의 성능을 향상시킬 수 있습니다.


ValueNotifier

ValueNotifier는 변경 가능한 값을 보유하고 있으며, 값이 변경될 때마다 등록된 리스너들에게 알림을 보내는 Flutter의 클래스입니다. 주로 상태 관리나 간단한 데이터 공유에 사용됩니다.

ValueNotifier를 사용하면 다음과 같은 작업을 수행할 수 있습니다:

  1. 값의 변경 감지: ValueNotifier는 값의 변경을 감시할 수 있습니다. 값이 변경될 때마다 등록된 리스너들에게 알림을 보냅니다.
  2. 상태 관리: ValueNotifier를 사용하여 위젯 간에 상태를 공유하거나 관리할 수 있습니다. 예를 들어, 여러 위젯이 같은 데이터를 사용해야 하는 경우, 해당 데이터를 ValueNotifier에 저장하고 변경될 때마다 위젯에 알림을 보내어 UI를 업데이트할 수 있습니다.
  3. 간단한 이벤트 처리: 값이 변경될 때 실행되어야 하는 코드를 리스너로 등록하여 간단한 이벤트 처리를 수행할 수 있습니다.

ValueNotifier의 중요한 메서드와 속성은 다음과 같습니다:

  • value: ValueNotifier가 보유하고 있는 값입니다. 값이 변경될 때마다 알림을 보냅니다.
  • addListener(): ValueNotifier에 리스너를 추가합니다. 값이 변경될 때마다 호출됩니다.
  • removeListener(): ValueNotifier에서 리스너를 제거합니다.
  • dispose(): ValueNotifier를 폐기하고 메모리를 해제합니다. 사용이 끝난 후 반드시 호출되어야 합니다.

ValueNotifier는 Flutter의 상태 관리 패턴 중 하나이며, 단순한 상태 관리에 유용합니다. 하지만 복잡한 상태 관리나 상태를 여러 곳에서 변경할 경우에는 Provider, Riverpod, 혹은 다른 상태 관리 라이브러리를 고려해야 할 수도 있습니다.


ValueListenableBuilder에 Slider를 빌드하고,  ValueNotifier로 값 변화를 감지하며 AnimationController value 주고받는 예시

ValueListenableBuilder, ValueNotifier 사용 예시 소스.

void initState() {
    _animationController.addListener(() {
      _range.value = _animationController.value;
    });
  }
  • initState():
    • initState() 함수는 StatefulWidget이 처음 생성될 때 호출되는 메서드입니다. 여기서는 애니메이션 컨트롤러에 대한 리스너를 추가합니다.
    • **_animationController.addListener()**는 애니메이션 컨트롤러의 값이 변경될 때마다 호출되는 콜백 함수를 등록합니다.
    • 이 콜백 함수 내에서는 _range ValueNotifier에 현재 애니메이션 컨트롤러의 값이 할당됩니다. 이렇게 하면 이 값이 변경될 때마다 ValueListenableBuilder를 통해 Slider 위젯의 값이 업데이트됩니다.
final ValueNotifier<double> _range = ValueNotifier(0.0);

  void _onChanged(double value) {
    _range.value = 0;
    _animationController.value = value;
  }
  • ValueNotifier:
    • ValueNotifier는 변경 가능한 값을 보유하고 있으며, 값이 변경될 때마다 등록된 리스너들에게 알림을 보내는 클래스입니다.
    • _range 변수는 ValueNotifier<double> 타입으로 선언되어 있으며, 초기값은 0.0으로 설정됩니다.
  •  _onChanged():
    • Slider 위젯의 값이 변경될 때 호출되는 콜백 함수입니다.
    • 이 함수는 새로운 값이 전달될 때마다 _range ValueNotifier를 0으로 재설정하고, 동시에 애니메이션 컨트롤러의 값을 새로운 값으로 설정합니다.
 ValueListenableBuilder(
              valueListenable: _range,
              builder: (context, value, child) {
                return Slider(value: value, onChanged: _onChanged);
              },
            )
  • ValueListenableBuilder:
    • ValueListenableBuilder는 ValueNotifier 또는 이와 유사한 클래스가 변화할 때마다 UI를 다시 빌드하는 Flutter 위젯입니다.
    • 이 위젯은 _range ValueNotifier를 구독하고 있으며, **_range**의 값이 변경될 때마다 자동으로 다시 빌드됩니다. 그리고 그 값으로 Slider 위젯을 다시 그립니다.
반응형
Comments