how to use observable File variable in Getx controller

Question

I am trying to use the observable File variable in Getx but it shows an error. and I don't know another option to make the File observable in getx.

Error

      [Get] the improper use of a GetX has been detected. 
      You should only use GetX or Obx for the specific widget that will be updated.
      If you are seeing this error, you probably did not insert any observable variables into GetX/Obx 
      or insert them outside the scope that GetX considers suitable for an update 
      (example: GetX => HeavyWidget => variableObservable).
      If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.

getx controller code

   File? selectedCoverImage;


   Future pickeCoverImageFromGallery() async {
     final image = await ImagePicker()
         .pickImage(source: ImageSource.gallery, imageQuality: 70);
     if (image == null) return;

       selectedCoverImage = File(image.path);
}

observable class

    Obx(
                    ()=> controller.selectedCoverImage != null
                          ? Image.file(
                              controller.selectedCoverImage!,
                              height: double.infinity,
                              width: double.infinity,
                              fit: BoxFit.cover,
                            )
                          : Image(
                              image: AssetImage(roomImage),
                              height: double.infinity,
                              width: double.infinity,
                              fit: BoxFit.cover,
                            ),
                    ),

if the file is selected then the selected file Otherwise shows the default set image.

Answer 1

You Have to make the selectedCoverImage observable, you can use GetX's Rx classes. In your case, you can use Rx<File> to create an observable selectedCoverImage. Here's how you can modify your GetX controller code:

class YourController extends GetxController {

      Rx<File>? selectedCoverImage = Rx<File>(File(""));
    
      Future pickCoverImageFromGallery() async {
        final image = await ImagePicker()
            .pickImage(source: ImageSource.gallery, imageQuality: 70);
        if (image == null) return;
    
        selectedCoverImage.value = File(image.path);
      }
    }

Now you can use Obx method:-

 Obx(
            () => controller.selectedCoverImage?.value != null
                ? Image.file(
                    controller.selectedCoverImage?.value??File(''),
                    height: double.infinity,
                    width: double.infinity,
                    fit: BoxFit.cover,
                  )
                : Image(
                    image: AssetImage(roomImage),
                    height: double.infinity,
                    width: double.infinity,
                    fit: BoxFit.cover,
                  ),
          ),

I hope this will help you.