Home > Software engineering >  How to make individual items of a list observable in getx flutter
How to make individual items of a list observable in getx flutter

Time:11-25

I have a list which has numbers and as soon as they change, the UI should change too. I am using getx to make this list which is inside a GetXController. The UI uses this controller to get the list and then uses grid list to create individual TextFields and assigns each of their respective values. I tried marking the list as observable as well but i couldn't seem to make it work.

EDIT: I want to listen to the individual RxInt objects in the list, not the list itself

CodePudding user response:

Make variable like this :

  RxList list = [].obs;

then use list like this :

  Obx(()=> Text(list.length.toString()));

CodePudding user response:

You can specify the type of the list easily like this

var products = <Product>[].obs;

Or you can try this

RxList<Product> product = (List<Product>.of([])).obs;

CodePudding user response:

Example of the controller class

    class VendorOfferController extends GetxController {
        static VendorOfferController to = Get.find();

        Rx<VendorOffer> vendorOffer = new VendorOffer().obs;

        VendorOfferRepository _vendorOfferRepository = new VendorOfferRepository();


  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    getVendorOffer();
   
  }

  getVendorOffer() async {
    Either<Failure, VendorOffer> data =
        await _vendorOfferRepository.getVendorOffer();

    data.fold((l) {
      AppExceptionHandle.exceptionHandle(l);
    }, (r) {
  
      vendorOffer.value = r;
    });
  }
}

Ui class example

    class VendorOfferScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Get.put(VendorOfferController());
    return Scaffold(body: Obx(() {

      return VendorOfferController.to.vendorOffer.value.vendorList.isEmpty
          ? Center(
              child: CircularProgressIndicator(),
            )
          :Padding(
              padding: const EdgeInsets.only(top: 16, bottom: 16),
              child: ListView.separated(
                  itemBuilder: (context, int index) {
               
          
                    return  VendorOfferCard(
                        address: VendorOfferController.to.vendorOffer.value
                                .vendorList[index].address ??
                            "12 /170 road:10 ,Mirpur 10 ",
                        name: VendorOfferController.to.vendorOffer.value
                                .vendorList[index].fullName ??
                            "Food Name",
                        deliveryCharge: VendorOfferController.to.vendorOffer
                                .value.vendorList[index].deliveryCharge ??
                            "\$10 ",
                        distance:
                            "${_distance == null ? 0 : _distance.round()} km",
                        rating: VendorOfferController.to.vendorOffer.value
                                .vendorList[index].rating ??
                            2,
                        offer:
                            "${VendorOfferController.to.vendorOffer.value.vendorList[index].offer == null ? "0" : VendorOfferController.to.vendorOffer.value.vendorList[index].offer.amount} %",
                        image: VendorOfferController.to.vendorOffer.value
                                    .vendorList[index].vendorImage !=
                                null
                            ? ApiUrls.download_base_url  
                                VendorOfferController.to.vendorOffer.value
                                    .vendorList[index].vendorImage
                            : AppAssets.demo_product_image,
                      ),
                    );
                  },
                  separatorBuilder: (context, int index) {
                    if (index == 0) {
                      return Container(
                        padding: EdgeInsets.only(top: 10),
                      );
                    }
                    return Container(
                      height: 10,
                    );
                  },
                  itemCount: VendorOfferController
                      .to.vendorOffer.value.vendorList.length),
            );
  • Related