ValueNotifier in Flutter : 상태를 관리하는 간단한 방법

1. ValueNotifier란?

 

`ValueNotifier`는 `ChangeNotifier`의 하위 클래스로, 단일 값의 변경을 수신 대상에게 알릴 수 있는 기능을 제공합니다. 즉, `ValueNotifier`는 단순한 값의 변화를 감지하고 이를 수신 대상(예: 위젯)에게 알려줄 수 있는 매커니즘이 포함되어 있습니다.

final counter = ValueNotifier<int>(0);

위의 예제에서는 `counter`라는 이름의 `ValueNotifier`를 생성하고 초기값을 0으로 설정했습니다.

 

 

2. ValueNotifier 사용하기

 

2-1 값 업데이트하기

 `.value` 속성을 사용하여 값을 변경하면 됩니다.

counter.value = 5;

 

 

2-2 값 변경 감지하기

 

`ValueNotifier`의 값 변경을 감지하기 위해 `ValueListenableBuilder` 위젯을 사용할 수 있습니다. 이 위젯은 `ValueNotifier`의 값이 변경될 때마다 자신의 `builder` 콜백을 호출합니다.

 

ValueListenableBuilder<int>(

  valueListenable: counter,

  builder: (context, value, child) {

    return Text('$value');

  },

)

 

 

 

3. 사용예제 : MQTT 메시지 관리

 

1. ValueNotifier: `MqttHandler` 클래스에는 `data`라는 `ValueNotifier<String>` 객체가 있습니다. `ValueNotifier`는 `ChangeNotifier`의 하위 클래스로, 단일 값의 변경을 수신 대상에게 알릴 수 있습니다. 이 경우에는 문자열 타입의 MQTT 데이터 값을 저장하고 있습니다.

final ValueNotifier<String> data = ValueNotifier<String>("");

 

2. MQTT 데이터 업데이트: `MqttHandler`의 `connect` 함수에서 MQTT 메시지를 받으면, 이 `data` 객체의 값을 업데이트합니다.

   client.updates!.listen((List<MqttReceivedMessage<MqttMessage?>>? c) {
     ...
     data.value = pt;
     notifyListeners();
     ...
   });

   여기서 `data.value = pt;` 부분에서 `ValueNotifier`의 값이 업데이트됩니다. 그 후 `notifyListeners();`가 호출되면, 해당 `ValueNotifier`에 등록된 수신 대상(예: `ValueListenableBuilder`)에게 값 변경 알림이 전송됩니다.

3. MqttView와의 연결: `MqttView`의 `_MqttViewState`에서는 `MqttHandler`의 인스턴스를 생성하며, 이 인스턴스의 `data` 값을 UI에 표시하기 위해 `ValueListenableBuilder`를 사용합니다.

 

   ValueListenableBuilder<String>(
     builder: (BuildContext context, String value, Widget? child) {
       ...
     },
     valueListenable: mqttHandler.data,
   )

   `ValueListenableBuilder`는 `valueListenable` 속성으로 제공된 `ValueNotifier` 객체의 값이 변경될 때마다 `builder` 콜백을 호출합니다. 따라서, MQTT 메시지가 수신되어 `MqttHandler`의 `data` 값이 업데이트되면, `MqttView`의 UI도 업데이트됩니다.

 

수신한 데이터는 `ValueNotifier`를 통해 `MqttView`에 전달됩니다. `ValueNotifier`의 값이 변경되면, 그 변경 사항을 수신 대상에게 자동으로 알림으로써 UI를 업데이트합니다.