겪은 문제와 상황
마이페이지 작업을 하면서 특정페이지에서 변경된 데이터가 다른 페이지에도 적용이 됐어야했다. 그러나 데이터가 변경되고나서 이전 페이지에서 바로 적용되지않고 새로고침해야만 적용이 됐었다.
쉽게 말해 A페이지에서 B페이지로 이동후에 B페이지에서 C페이지로 이동 후 C에서 데이터를 수정하고 뒤로가기를 통해 A로 이동 할 시 A,B페이지에는 변경된 데이터가 화면상에 적용되지않은 상태이다.
처음 떠올렸던 방법은 obs와 Obx()를 활용한 반응형 상태관리였다. 화면에 변경된 데이터를 출력하는 부분을 반응형으로 만들어주어 변경을 감지하고 반응하게끔 시도하였다.
Obx(
() => Text(
'${controller.accountModel?.company?.phone.obs}',
style: TextStyle(
color: Color(0xFF010101),
fontSize: 16,
),
),
),
직접 사용한 예시인데 위의 방법을 통해 절반의 성공을 거두었다. 왜 절반이냐면 B에서는 변경된 데이터가 출력되었지만 A에서는 변경되지않은 채 그대로였기 때문이다.
구글링을 통해 Get.back()시 이전 페이지를 새로고침 하는 방법을 찾아봤을때 setState()를 사용하라는게 대부분이었는데 나는 setState()를 사용하지 못하는 상황이라 어떻게하면될지 고민이었다.
우선 변경된 데이터 반영이 B만먼저 적용되고 A에는 왜 안되는지를 알아야했다. 찾아보니B,C는 같은controller를 사용중이라 C에서 변경된 데이터가 obs,Obx()사용시 B에서도 바로 적용되었던것이다. A는 다른 controller를 사용중이라 바로 적용되지않았던 것이고. 그래서 B에서 A로 Get.back()을 통한 뒤로가기 이전에 A controller를 새로고침 해주기로했다.
BusinessMyPageController가 위에서 말한 A페이지에 사용되는 controller이다.
onWillPop: () async { Get.find<BusinessMyPageController>().refresh(); Get.back(); return false; },
이렇게 함으로써 B에서 A로 페이지 이동시 새로고침 효과가 적용되어 A에서도 정상적으로 변경된데이터가 반영되었다.