Lazy loading list does not refresh in Getx bottomsheet

Question

I have a lazy loading list displayed using getx bottom sheet. The problem is when the list is updated in the controller the bottom sheet does not refresh to show the new updates as expected.

Here is the code I wrote:

Controller

class LazyListController extends GetxController {

  RxList<String> myList = RxList<String>([]);
  ScrollController scrollController = ScrollController();
  int currentMax = 10;

  void onInit(){
    super.onInit();
    myList.value = List.generate(10, (i) => "Item : ${i + 1}");
    scrollController.addListener(() {
      if (scrollController.position.pixels >=
          scrollController.position.maxScrollExtent * 0.8) {
        _getMoreData();
      }
    });
  }

  void _getMoreData() {
    List<String> _list = [];

    for (int i = currentMax; i < currentMax + 10; i++) {
      if (i == currentMax) print('CURRENT MAX: $currentMax');
      _list.add("Item : ${i + 1}");
    }

    myList.value.addAll(_list);

    currentMax = currentMax + 10;
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }

}

View

reviewsListBottomSheet() {
  var controller = Get.find<ReviewController>();

  return Get.bottomSheet(
    return Obx(
      () => Container(
        height: Get.height * 0.90,
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.8), 
              spreadRadius: 200, 
              blurRadius: 200, 
              offset: Offset(0, 20),
            ),
          ],
          borderRadius: new BorderRadius.only(
            topLeft: const Radius.circular(20.0),
            topRight: const Radius.circular(20.0),
          ),
        ),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  'List of Items',
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 20,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                const Spacer(),
               ],
            ),
            const Divider(color: Colors.grey),
            const SizedBox(height: 10)(),
            Container(
              height: Get.height * 0.625,
              child: ListView.builder(
                controller: controller.scrollController,
                itemCount: controller.myList.length,
                
                itemBuilder: (context, i) {
                  return ListTile(
                    title: Text(controller.myList[i]),
                  );
                },
              ),
            ),
            const SizedBox(height: 10)(),
          ],
        ),
      ),
    ),
    isDismissible: true,
    barrierColor: Colors.transparent,
    backgroundColor: Colors.white,
    enableDrag: true,
    isScrollControlled: true,
  );
}

Please how can this issue be fixed?

Answer 1

I just switched to using GetBuilder and the bottomsheet updates.

Controller

class LazyListController extends GetxController {

  List<String> myList = [];
  ScrollController scrollController = ScrollController();
  int currentMax = 10;

  void onInit(){
    super.onInit();
    myList = List.generate(10, (i) => "Item : ${i + 1}");
    scrollController.addListener(() {
      if (scrollController.position.pixels >=
          scrollController.position.maxScrollExtent * 0.8) {
        _getMoreData();
      }
    });
  }

  void _getMoreData() {
    List<String> _list = [];

    for (int i = currentMax; i < currentMax + 10; i++) {
      if (i == currentMax) print('CURRENT MAX: $currentMax');
      _list.add("Item : ${i + 1}");
    }

    myList.addAll(_list);
    
    currentMax = currentMax + 10;
    update();
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }

}

View

reviewsListBottomSheet() {
  var controller = Get.find<ReviewController>();

  return Get.bottomSheet(
    GetBuilder<ReviewController>(
        init: controller,
        autoRemove: false,
        builder: (controller) {
          return Container(
            height: Get.height * 0.90,
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.8), 
                  spreadRadius: 200, 
                  blurRadius: 200, 
                  offset: Offset(0, 20),
                ),
              ],
              borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(20.0),
                topRight: const Radius.circular(20.0),
              ),
            ),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      'List of Items',
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 20,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    const Spacer(),
                  ],
                ),
                const Divider(color: Colors.grey),
                FormLabelGap(),
                Container(
                  height: Get.height * 0.625,
                  child: ListView.builder(
                    controller: controller.scrollController,
                    itemCount: controller.myList.length,
                    itemBuilder: (context, i) {
                      return ListTile(
                        title: Text(controller.myList[i]),
                      );
                    },
                  ),
                 ),
                FormLabelGap(),
              ],
            ),
          );
        }),
    isDismissible: true,
    barrierColor: Colors.transparent,
    backgroundColor: Colors.white,
    enableDrag: true,
    isScrollControlled: true,
  );
}