Flutter getx ui 렌더링 적용이 안될 때

 

Getx 는 Flutter 상태관리 중 하나이다. 

편하다. 너무 편하다. 

 

개발을 하던 중에 .obs 로 선언한 변수를 ui에 끌어다가 썼는데 바로 적용이 안된다. 

핫 리로드를 하면 또 바뀐다. 

 

즉 해당 .obs의 변수를 즉각적으로 감지를 못한 다는 이야기이다. 

이 때 수동으로 직접 새로고침을 통해 변환 시켜주는 방법이 있다. 

 

바로 

 

refresh() 함수를 이용해서 바꿔주면 된다. 

 

Widget categoryboard(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 50.h,
      child: ListView.builder(
          physics: BouncingScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemCount: controller.categoryboard.length,
          itemBuilder: ((context, index) {
            return Padding(
              padding: EdgeInsets.all(6),
              child: GestureDetector(
                onTap: () {
                  controller.selectIndex.value = index;
                  //getx 에서 해당 위젯의 ui가 적용이 되지 않을 때 사용하는 방법 refresh!!
                  controller.categoryboard.refresh();
                },
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  margin: EdgeInsets.all(5),
                  width: 102.w,
                  height: 34.h,
                  decoration: BoxDecoration(
                      color: controller.selectIndex == index
                          ? GlobalStyle.bayabas_blue
                          : GlobalStyle.bayabas_white,
                      borderRadius: BorderRadius.all(Radius.circular(18)),
                      border:
                          Border.all(color: GlobalStyle.bayabas_gray_light)),
                  child: Center(
                      child: Text(
                    controller.categoryboard[index],
                    style: controller.selectIndex == index
                        ? GlobalStyle.setTextStyle(
                            "14", "w700", "Apple", GlobalStyle.bayabas_white)
                        : GlobalStyle.setTextStyle(
                            "14", "w700", "Apple", GlobalStyle.bayabas_black),
                  )),
                ),
              ),
            );
          })),
    );
  }