일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- GitHub
- HTML
- 마우이
- 함수
- 애니메이션
- 오류
- 플러터
- 자바스크립트
- Animation
- typescript
- page
- MSSQL
- spring boot
- JavaScript
- 리엑트
- Flutter
- .NET
- AnimationController
- 깃허브
- 바인딩
- Binding
- db
- Maui
- React JS
- Firebase
- MVVM
- MS-SQL
- 닷넷
- 파이어베이스
- listview
Archives
- Today
- Total
개발노트
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는 다음과 같은 상황에서 사용됩니다:
- 값의 변화를 감시하고 UI를 업데이트할 때: 예를 들어, 애니메이션의 진행률을 나타내는 ValueNotifier를 사용하여 ValueListenableBuilder를 생성하면, 애니메이션의 진행률이 변경될 때마다 Slider나 Progress Indicator와 같은 UI 요소가 자동으로 업데이트됩니다.
- 단일 값에 의존하는 UI를 빌드할 때: 예를 들어, 어플리케이션의 테마나 사용자 설정을 저장하는 ValueNotifier가 있다면, 이 값이 변경될 때마다 UI의 테마나 설정을 업데이트할 수 있습니다.
ValueListenableBuilder를 사용하면 ValueNotifier의 값이 변경될 때마다 setState()를 호출할 필요가 없으며, 값이 변경될 때마다 UI가 자동으로 업데이트됩니다. 이는 코드를 더 간결하게 작성할 수 있고, Flutter 프레임워크의 성능을 향상시킬 수 있습니다.
ValueNotifier
ValueNotifier는 변경 가능한 값을 보유하고 있으며, 값이 변경될 때마다 등록된 리스너들에게 알림을 보내는 Flutter의 클래스입니다. 주로 상태 관리나 간단한 데이터 공유에 사용됩니다.
ValueNotifier를 사용하면 다음과 같은 작업을 수행할 수 있습니다:
- 값의 변경 감지: ValueNotifier는 값의 변경을 감시할 수 있습니다. 값이 변경될 때마다 등록된 리스너들에게 알림을 보냅니다.
- 상태 관리: ValueNotifier를 사용하여 위젯 간에 상태를 공유하거나 관리할 수 있습니다. 예를 들어, 여러 위젯이 같은 데이터를 사용해야 하는 경우, 해당 데이터를 ValueNotifier에 저장하고 변경될 때마다 위젯에 알림을 보내어 UI를 업데이트할 수 있습니다.
- 간단한 이벤트 처리: 값이 변경될 때 실행되어야 하는 코드를 리스너로 등록하여 간단한 이벤트 처리를 수행할 수 있습니다.
ValueNotifier의 중요한 메서드와 속성은 다음과 같습니다:
- value: ValueNotifier가 보유하고 있는 값입니다. 값이 변경될 때마다 알림을 보냅니다.
- addListener(): ValueNotifier에 리스너를 추가합니다. 값이 변경될 때마다 호출됩니다.
- removeListener(): ValueNotifier에서 리스너를 제거합니다.
- dispose(): ValueNotifier를 폐기하고 메모리를 해제합니다. 사용이 끝난 후 반드시 호출되어야 합니다.
ValueNotifier는 Flutter의 상태 관리 패턴 중 하나이며, 단순한 상태 관리에 유용합니다. 하지만 복잡한 상태 관리나 상태를 여러 곳에서 변경할 경우에는 Provider, Riverpod, 혹은 다른 상태 관리 라이브러리를 고려해야 할 수도 있습니다.
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 위젯을 다시 그립니다.
반응형
'앱 개발 > Flutter' 카테고리의 다른 글
Comments