How to update the ui when my list gets filled with data GetX Flutter

Question

Im trying to show a listView.builder inside a AlertDialog, and Im filling the its list by calling a function everytime the button to open the AlertDialog is pressed but the problem is that the ui doesn’t update when the list is filled with the data, I'm using getX and I'm very new to it, can someone show me what I'm doing wrong?

I'm using the GetX builder:

GetX<DashboardController>(
            init: Get.put<DashboardController>(DashboardController()),
            builder: (DashboardController dashboardController) {
              return GridView.builder(

My Get.dialog function:

                  return GestureDetector(
                    onTap: () {
                      // this is where I'm filling the list
                      dashboardController
                          .callEmployeeCheckInOutList(_employeeModel.id);
                      Get.dialog(
                        AlertDialog(
                          contentPadding: EdgeInsets.zero,
                          content: SizedBox(
                            height: size.height * 0.55,
                            width: size.width,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                EmployeeProfileWidget(
                                  size: size,
                                  profileBackgroudPath: profileBackgroudPath,
                                  employeeModel: _employeeModel,
                                ),
                                // this is where my listview.builder resides
                                EmployeeActivityWidget(
                                  closeCrossPath: closeCrossPath,
                                  employeeCheckInOutList:
                                      _employeeCheckInOutList,
                                  employeeModel: _employeeModel,
                                  onTap: () {},
                                ),
                              ],
                            ),
                          ),
                        ),
                      );   
                    },

My listview.builder:

 Expanded(
              child: Padding(
                padding: const EdgeInsets.only(
                  left: 32.0,
                  right: 50.0,
                ),
                child: ListView.builder(
                  itemCount: employeeCheckInOutList.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    final _checkInOutModel = employeeCheckInOutList[index];
                    return SizedBox(
                      height: 120,
                      child: TimelineTile(
                        beforeLineStyle: const LineStyle(
                          color: Color(0xffa5affb),
                        ),

My Controller:

  Rx<List<CheckInOutModel>> _employeeCheckInOutList =
      Rx<List<CheckInOutModel>>([]);

  List<CheckInOutModel> get employeeCheckInOutList =>
      _employeeCheckInOutList.value;

  Future<void> callEmployeeCheckInOutList(String id) async {
    _employeeCheckInOutList =
        await EmployeeService.employeeCheckInOutFuture(docId: id);
    update();
  }

Answer 1

I already faced same issue.

Solution:

Simply use again GetX<Controller> inside AlertDialog

like

GetX<DashboardController>(
            init: Get.put<DashboardController>(DashboardController()),
            builder: (DashboardController dashboardController) {
              return GridView.builder(
              .....
              
              Get.dialog(
                    AlertDialog(
                      contentPadding: EdgeInsets.zero,
                      content:  GetX<DashboardController>(
                        init: Get.put<DashboardController>(DashboardController()),
                        builder: (DashboardController dashboardController) {
                            SizedBox(

Answer 2

Use .assignAll method on the RxList to trigger UI update:

 Future<void> callEmployeeCheckInOutList(String id) async {
     final result = await EmployeeService.employeeCheckInOutFuture(docId: id);
     _employeeCheckInOutList.assignAll(result);
 }

And you don't need to call update() when using Rx.