ValueNofitier

샤워실의 바보·2024년 2월 16일
0
post-thumbnail

ValueNotifier는 Flutter에서 상태 관리를 위한 간단한 방법을 제공하는 클래스입니다. ValueNotifier<T>는 값의 변경을 감지할 수 있는 리스너를 가진, 단일한 데이터 값을 감싸는 래퍼(wrapper)입니다. TValueNotifier가 감싸고 있는 데이터의 타입입니다. 데이터 값이 변경될 때, ValueNotifier는 등록된 리스너들에게 변경 사실을 알리며(UI 업데이트를 트리거할 수 있도록), 이를 통해 반응형 프로그래밍 패턴을 구현할 수 있습니다.

기본 사용 방법

  1. 인스턴스 생성: ValueNotifier의 인스턴스를 생성하고 초기값을 할당합니다.
  2. 값 변경: ValueNotifiervalue 속성을 사용하여 값을 변경합니다. 값이 변경될 때마다 notifyListeners가 자동으로 호출되어 모든 리스너에게 알립니다.
  3. 리스너 추가: 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>는 비디오의 음소거 상태를 관리합니다. 사용자가 스위치를 토글할 때마다 videoConfigvalue가 변경되고, 이 변경은 ValueListenableBuilder에 의해 감지되어 UI가 적절하게 업데이트됩니다.

ValueNotifier를 사용하면 상태 관리 코드를 단순화하고, 필요한 부분에서만 UI를 업데이트하여 성능을 최적화할 수 있습니다. 이 방법은 작은 범위의 상태 관리에 특히 유용하며, Flutter 앱 개발에서 반응형 UI를 구현하는 데 도움을 줍니다.

profile
공부하는 개발자

0개의 댓글