[Flutter]토글버튼 만들기

class ToggleButtonWidget extends StatefulWidget {
  const ToggleButtonWidget({
    super.key,
  });

  @override
  State<ToggleButtonWidget> createState() => _ToggleButtonWidgetState();
}

class _ToggleButtonWidgetState extends State<ToggleButtonWidget> {
  final _controllerbutton = ValueNotifier<bool>(false);

  bool _check = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _controllerbutton.addListener(() {
      setState(() {
        if (_controllerbutton.value) {
          _check = true;
        } else {
          _check = false;
        }
      });
    });
  }

  @override
  void dispose() {
    _controllerbutton.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return  AdvancedSwitch(
              width: 48,
              height: 24,
              thumb: Container(
                width: 20,
                height: 20,
                decoration: ShapeDecoration(
                    color: _controllerbutton.value
                        ? Color(0xFF2B80FF)
                        : Color(0xFFC9C9C9),
                    shape: OvalBorder(),
                    shadows: [
                      BoxShadow(
                        color: Color(0x4C000000),
                        blurRadius: 3,
                        offset: Offset(0, 0),
                        spreadRadius: 0,
                      )
                    ]),
              ),
              activeColor: Color(0x3300287C),
              inactiveColor: Color(0xff00297C33),
              controller: _controllerbutton,
            );
  }
}

---

GetX로 controller하는 법

GetX로 컨트롤을 해주면 GetXController를 상속하는 컨트롤러 클래스 내부에서 초기화 및 해제 로직을 관리해주기 때문에 초기화해주고 종료를 선언해주는 initState와 dispose 메서드를 사용하지 않아도 되기때문에 코드를 더 간결하게 쓸수있다.

먼저 SwitchController만들어줌.

class SwitchController extends GetxController {
  final ValueNotifier<bool> controllerButton = ValueNotifier<bool>(false);

  void toggleSwitch() {
    controllerButton.value = !controllerButton.value;
  }
}

불러와야할 페이지에서 컨트롤러를 불러준다.

 final ToggleButtonController controller = Get.put(ToggleButtonController());

그리고 나서 위에 _controllerbutton를 선언해준 부분을
SwitchController에서 선언해준 controllerButton로 사용하면 된다.

근데 이방법을 하니 토글이 활성화 비활성화에 따라 색상이 변해야하는데 색상이 하나도 변하지 않았다...

class ToggleButtonWidget extends StatefulWidget {
  const ToggleButtonWidget({
    super.key,
  });

  @override
  State<ToggleButtonWidget> createState() => _ToggleButtonWidgetState();
}

class _ToggleButtonWidgetState extends State<ToggleButtonWidget> {
  @override
  Widget build(BuildContext context) {
    final _controllerbutton = ValueNotifier<bool>(false);
    bool _check = false;

    @override
    void initState() {
      // TODO: implement initState
      super.initState();

      _controllerbutton.addListener(() {
        setState(() {
          if (_controllerbutton.value) {
            _check = true;
          } else {
            _check = false;
          }
        });
      });
    }

    @override
    void dispose() {
      _controllerbutton.dispose();
      super.dispose();
    }

    return Opacity(
              opacity: 0.9,
              child: Container(
                decoration: BoxDecoration(
                  color: Color(0x3300287C),
                  border: GradientBoxBorder(
                    width: 1,
                    gradient: LinearGradient(
                      colors: [
                        Colors.white.withOpacity(0.5),
                        Colors.white.withOpacity(0.2)
                      ],
                    ),
                  ),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: AdvancedSwitch(
                  width: 48,
                  height: 24,
                  thumb: Container(
                    width: 20,
                    height: 20,
                    decoration: ShapeDecoration(
                        color: _controllerbutton.value
                            ? Color(0xFF2B80FF)
                            : Color(0xFFC9C9C9),
                        shape: OvalBorder(),
                        shadows: [
                          BoxShadow(
                            color: Color(0x4C000000),
                            blurRadius: 3,
                            offset: Offset(0, 0),
                            spreadRadius: 0,
                          )
                        ]),
                  ),
                  activeColor: Color(0x3300287C),
                  inactiveColor: Color(0xff00297C33),
                  controller: _controllerbutton,
                ),
              ),
            ),
        }
      }

토글버튼을 누른다음 코드 저장을 해도 디버그 모드에 아무것도 안뜬다.

_check, _controllerbutton.value를 프린트해봐도 아무것도 안뜬다...

리스너 등록이 아예 안된 것이다...
컨트롤러 등록을 안해놔서 적용이 안된다.

일단 initState()이랑 dispose()부분이랑 객체 선언을 다 이젯 빌드 밖으로 꺼내고

bool _check = false;는 bool check = false;로 만들고 onChange안에

 onChanged: (value) {
               check;
               print(value);
               setState(() {
                 check = !check;
               });
               print(check);
             },

를 하면

토글버튼을 움직였을때 이렇게 true, false값이 잘 나온다.

_controllerbutton.value이것보다는 onChange를 이용해서 값을 바꿔주는게 훨씬 편하고 좋다!