
ValueNotifier는 Flutter에서 상태 관리를 위한 간단한 방법을 제공하는 클래스입니다. ValueNotifier<T>는 값의 변경을 감지할 수 있는 리스너를 가진, 단일한 데이터 값을 감싸는 래퍼(wrapper)입니다. T는 ValueNotifier가 감싸고 있는 데이터의 타입입니다. 데이터 값이 변경될 때, ValueNotifier는 등록된 리스너들에게 변경 사실을 알리며(UI 업데이트를 트리거할 수 있도록), 이를 통해 반응형 프로그래밍 패턴을 구현할 수 있습니다.
ValueNotifier의 인스턴스를 생성하고 초기값을 할당합니다.ValueNotifier의 value 속성을 사용하여 값을 변경합니다. 값이 변경될 때마다 notifyListeners가 자동으로 호출되어 모든 리스너에게 알립니다.ValueListenableBuilder 위젯을 사용하여 ValueNotifier의 값을 UI에 바인딩하고, 값이 변경될 때마다 UI가 업데이트되도록 합니다.아래 예시에서는 ValueNotifier를 사용하여 비디오의 음소거 상태를 관리하는 방법을 보여줍니다.
// ValueNotifier 인스턴스 생성. 초기값은 false (비디오 음소거 해제 상태).
final videoConfig = ValueNotifier(false);
class SettingsScreen extends StatefulWidget {
const SettingsScreen({super.key});
State<SettingsScreen> createState() => _SettingsScreenState();
}
class _SettingsScreenState extends State<SettingsScreen> {
bool _notifications = false;
void _onNotificationsChanged(bool? newValue) {
if (newValue == null) return;
setState(() {
_notifications = newValue;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
),
body: ListView(
children: [
// ValueListenableBuilder를 사용하여 videoConfig의 값에 따라 SwitchListTile을 업데이트함.
ValueListenableBuilder(
valueListenable: videoConfig,
builder: (context, value, child) => SwitchListTile.adaptive(
value: value, // videoConfig의 현재 값으로 스위치 상태 설정
onChanged: (value) {
videoConfig.value = !videoConfig.value; // 스위치 토글 시 videoConfig 값 업데이트
},
title: const Text("Mute video"),
subtitle: const Text("Videos will be muted by default."),
),
),
// 기타 설정 항목들...
],
),
);
}
}
위 코드에서 ValueNotifier<bool>는 비디오의 음소거 상태를 관리합니다. 사용자가 스위치를 토글할 때마다 videoConfig의 value가 변경되고, 이 변경은 ValueListenableBuilder에 의해 감지되어 UI가 적절하게 업데이트됩니다.
ValueNotifier를 사용하면 상태 관리 코드를 단순화하고, 필요한 부분에서만 UI를 업데이트하여 성능을 최적화할 수 있습니다. 이 방법은 작은 범위의 상태 관리에 특히 유용하며, Flutter 앱 개발에서 반응형 UI를 구현하는 데 도움을 줍니다.