Flutter GetX Obx do not update UI automatically

Question

I have a screen that I'd put all body in an Obx . I have a Row like bellow

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Visibility(
      visible: !lastController.posts[i].isDownloaded,
      child: GestureDetector(
               onTap: () async {
                      lastController.isDownloading.value = true;
                      await lastController.setPostIsDownloading(i);
                      await lastController.Download(i);
                      await lastController.setPostIsDownloading(i);
                      lastController.isDownloading.value = false;
                               },
                      child: lastController.isDownloading.value?
                                lastController.posts[i].isDownloading? 
                                 SizedBox(
                                   height: 22,
                                   width: 22,
                                   child: CircularProgressIndicator(
                                            backgroundColor: Colors.white,
                                            value:lastController.percentage.value,
                                            ),
                                            )
                                            : const Icon(
                                                          FontAwesome.download,
                                                          color: Colors.white,
                                                        )
                                                  : const Icon(
                                                      FontAwesome.download,
                                                      color: Colors.white,
                                                    ),
                                            ),
                                          ),
                                          const SizedBox(
                                            width: 10.0,
                                          ),
                                          Visibility(
                                            .....
                                          ),
                                        ],
                                      )

and my Controller is like bellow

class LastMonasebatController extends GetxController {


RxList<Posts> posts = <Posts>[].obs;

Future<void> setPostIsDownloading(int id) async {
    posts[id].isDownloading = !posts[id].isDownloading;

    posts.refresh();

  }


Future<void> Download(int id) async {
    ........
    posts[id].isDownloaded = true;
    posts.refresh();
  }


}

When I tap on GestureDetector the post downloading until end but the icon does not change and after downloading complete when I hot reload the controller icon disappeared because post.isDownloaded is false . This is not change UI Automatically . What is the problem ?

I want Getx to change the UI automatically

Answer 1

RxList needs a manual update when its elements changes, so it updates on Obx, you need to call refresh() on it like this:

Future<void> Download(int id) async {
 ........
 posts[id].isDownloaded = true;
 shabs.refresh();
 posts.refresh(); // add this
}

this will tell Obx that the RxList is the same object, but its inside elements did change to update.

and this is an assume, but in your code, there are two checks over isDownloading,

 // ...
 child: lastController.isDownloading.value?
     lastController.posts[i].isDownloading? 
 // ...

maybe you need to check only over the ones that belongs to the posts[i]:

     // ...
    child: lastController.posts[i].isDownloading? 
    // ...