[Flutter] getX를 이용해 화면 갱신하기

마이페이지 화면에서 사용자 닉네임이 표시되고, 이를 변경가능하게 구현하려고 함.
이름 옆에 edit Icon을 넣고 edit Icon을 누르면 텍스트로 표시되었던 사용자 이름이 TextField로 편집가능하게 구현하고 싶음

대충 이런 느낌! 톱니바퀴 아이콘을 아직 안빼서 위젯들이 좀 겹쳤지만

아래와 같이 코드 구현

IconButton(
  onPressed: () {
  isEditing.value = true;
  print(isEditing);
},

edit Icon을 눌렀을 때 isEditing bool 변수 값이 바뀌게 함

if (isEditing.value)
  SizedBox(
    width: 150,
    child: TextField(
      controller: usernameController,
      autofocus: true,
      decoration: InputDecoration(
        hintText: '${authController.username.value}',
      ),
    ),
  )
else
  Text(
    "$username 님",
    style: const TextStyle(
      fontWeight: FontWeight.w500,
      fontSize: 20,
    ),
  )

isEditing 값이 true이면 textfield를, false이면 텍스트가 보이도록 코드 작성

 

---

하지만 역시나 화면이 갱신되지 않는다. 그럴줄 알았음 기대도 안햇음
isEditing 변수값은 올바르게 바뀌는데 화면이 이를 감지하지 못한다
예전에는 방법이 없어 상태감지를 위한 변수를 직접 추가해 setState에서 감지했지만
이번에는 getX 를 사용중!이므로 이를 활용하면 된다.

  RxBool isEditing = false.obs;

isEditing을 그냥 bool타입이 아닌, RxBool 타입으로 바꾼다. isEditing 변수를 반응형 변수인 RxBool로 선언하면, 값이 변경될 때마다 화면이 자동으로 갱신된다.

Obx(
  () => Row(
    children: [
      if (isEditing.value)
        SizedBox(
          width: 150,
          child: TextField(
            controller: usernameController,
            autofocus: true,
            decoration: const InputDecoration(
              hintText: "이름을 입력하세요",
            ),
          ),
        )
      else
        Text(
          "${username.value} 님",
          style: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
          ),
        ),
    ],
  ),
);

Obx를 사용하여 isEditing이 변경될 때마다 다시 화면을 렌더링한다. 

 

와 진짜 짱이다 getx. 글쓸시간이 없는데 잊지 않기 위해 대충 기록하엿다.
바로 잘돼서 너무 놀랏고 속이 다 시원했다 맨날 화면 갱신 안돼서 변수 값 하나하나 찍어보며 디버깅하는데 지쳣으나.. 상태관리 라이브러리 활용을 각잡고 공부하려 했을 때 너무 어려워서 실패했는데, 프로젝트를 진행하면서 자연스레 조금씩 활용해보고 배우게 되는 것 같아서 좋다