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?

CodePudding user response：

As far as I can see, you're not using myList to populate list of items in the Column widget. You could do something like:

ListView.builder(
 shrinkWrap: true,
 itemCount: controller.myList.length,
 itemBuilder: (context, index) {
  return Row(
   mainAxisAlignment: MainAxisAlignment.start,
   children: [
    Text(
     'List Items at $index',
     style: TextStyle(
      color: AppColors.nBlue,
      fontSize: 20,
      fontWeight: FontWeight.w400,
     ),
    ),
    const Spacer(),
    FormLabelGap(),
   ],
  ),
 }
)

CodePudding user response：

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,
  );
}