[Flutter] setstate 없이 Button 사용

ElevatedButton을 클릭하여 값을 바꿀때마다 setstate를 사용하는 경우가 있다. setstate는 refresh & reload를 해주기 때문에 다른 child widget에도 영향을 준다. 예를 들어서 child widget에 random으로 list에 있는 값을 뽑는 함수가 있다면 이 값이 버튼을 누를때마다 바뀌게 된다.

 

이러한 문제를 해결하기위해 ValueNotifier, ValueListenableBuilder를 사용할 것이다.

 

먼저 button의 initialize value 값을 정의하기위해 ValueNotifier를 사용한다.

ValueNotifier<String> dropdownValue = ValueNotifier(timeTypeList.first);

• List<String> timeTypeList

 

그리고 다음과 같이 Button이라고 정의한 method에 ValueListenableBuilder<String>을 사용한다.

ValueListenableBuilder<String> Button(BuildContext context) {
    return ValueListenableBuilder<String>(
        valueListenable: dropdownValue,
        builder: (BuildContext context, String value, Widget? child) {
          return ElevatedButton(
            onPressed: () {},
            child: DropdownButton(
              value: value,
              items: timeTypeList.map<DropdownMenuItem<String>>(
                (String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                },
              ).toList(),
              onChanged: (String? value) {
                dropdownValue.value = value!;
              },
            ),
          );
        });

• valueListenable: 앞서 정의한 ValueNotifier<String> dropdownvalue 를 넣어준다.
• DropdownButton - value: ValueListenableBuilder의 String value 값을 넣어줘야한다.
• onChanged: ValueNotifier<String> dropdownvalue의 내부 value 값을 선택한 값으로 변경해준다.