I am using Getx for statemanagement, when I add data to server it doesn't appear newer data in listview until hot restart while list view is in Obx

Question

I am working on an app. It's working fine with the rest API to get data from the server. But when I try to add data to the server newer data doesn't appear in the list. Here is my code for view and controller class.

View class code. It is in stateless widget

Expanded(
            child: Obx(() {
              if (controller.isLoading.value) {
                return Center(child: LoadingBar());
              } else {
                return controller.profilesList.length == 0
                    ? Center(child: Text("No Service Found"))
                    : ListView.builder(
                        physics: ScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: controller.profilesList.length,
                        itemBuilder: (context, index) {
                          return Card(
                            elevation: 5,
                            shape: RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5))),
                            clipBehavior: Clip.antiAlias,
                            child: Container(
                              height: 100,
                              child: Row(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.all(2.0),
                                    child: Container(
                                        width: 100,
                                        // height: 100,
                                        decoration: BoxDecoration(
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(5)),
                                            image: DecorationImage(
                                                image: NetworkImage(
                                                    'http://192.168.43.113:4000/${controller.profilesList[index].shopImage}'),
                                                fit: BoxFit.cover))),
                                  ),
                                  Flexible(
                                    child: Padding(
                                      padding: const EdgeInsets.all(2.0),
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            controller
                                                .profilesList[index].shopName,
                                            style: TextStyle(
                                                color: Colors.black,
                                                fontWeight: FontWeight.bold,
                                                fontSize: 15),
                                          ),
                                          Text(
                                              controller
                                                  .profilesList[index].address,
                                              maxLines: 1,
                                              overflow: TextOverflow.ellipsis,
                                              style: TextStyle(
                                                  color: Colors.black54)),
                                          Text('9:AM-10:PM Mon-Sat',
                                              maxLines: 1,
                                              overflow: TextOverflow.ellipsis,
                                              style: OrdersTextStyle
                                                  .servicesTextStyle()),
                                          Align(
                                            alignment: Alignment.bottomLeft,
                                            child: Container(
                                              decoration: BoxDecoration(
                                                color: CustomColors.lightRed,
                                                //   border: Border.all(width: 1),
                                                borderRadius: BorderRadius.all(
                                                    Radius.circular(5)),
                                              ),
                                              child: Padding(
                                                padding:
                                                    const EdgeInsets.all(3.0),
                                                child: Text(
                                                  controller
                                                      .profilesList[index]
                                                      .providercategories
                                                      .providerCatName,
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontWeight:
                                                          FontWeight.normal),
                                                ),
                                              ),
                                              // height: 25,
                                              // width: 70,
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          );
                        },
                      );
              }
            }),

Here is my controller class

class ProviderProfilesController extends GetxController {
  var id = ''.obs;
  var isLoading = true.obs;
  var profilesList = <ProfileModel>[].obs;
  

  void getProfilesData(String id) async {
    isLoading(true);
    try {
      var list = await ApiServices.getProvidersprofileData(id);
      if (list != null) {
        profilesList.value = list;
       
      }
    } finally {
      isLoading(false);
      
    }
//profilesList.refresh();
    
  }
  @override
  void onInit() {
    super.onInit(); 
    getProfilesData(id.value);

  }
}

Answer 1

I think the problem here is that you are using profileList.value to update the list and the right way to do that is adding items to the list using the List's functions like in the following examples:

final abc = [0,1,2].obs;

abc.add(12);

In your case you can use the following code once you want to add a whole list:

abc.addAll(['12','234','1465']);

Let me know if this don't work because there is also the update and refresh functions on getx which solved my problem sometimes. I'll answer here asap.