Flutter GETX: How to update Get.defaultDialog(...) data from the controller

A button opens alert dialog with GETX (Get.defaultDialog) and I have an image picker button with Image.File(...) in the dialog and when I pick the image from the gallery the image doesnt get updated only if I leave the dialog and open another one
I want to update the Image.File after selecting the image with GETX

I tried update(); in the controller function didnt update and I tired the GetxBuilder in the dialog but I get an error

first file

imageController controller = Get.put(imageController());
alertAddProduct() {
  Get.defaultDialog(
      title: "Add product",
      middleText: "Add product",
      //radius: 20,
      barrierDismissible: false,
      content: Column(
        children: [
          Container(
            child: controller.imagePath != null ? Image.file(controller.imagePath,errorBuilder: (context, error, stackTrace) {
            return const Text("Bruh");
          },): const Text("Pick image")
          ),
          ElevatedButton(
            onPressed: () {
              controller.getImage();
            },
            child: const Text("Select image"),
          )
        ]
      ),
      actions: [
        ElevatedButton(
            onPressed: () {
              // working on it
            },
            child: const Text("Yes")),
        ElevatedButton(
          onPressed: () {
            Get.back();
          },
          child: const Text("No"),
        ),
      ],);
}

and the controller file

import 'dart:io';

import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';

class imageController extends GetxController {
  // ignore: prefer_typing_uninitialized_variables
  var imagePath;
  void getImage() async {
  final ImagePicker picker = ImagePicker();
  final XFile? image = await picker.pickImage(
    source: ImageSource.gallery,    
    );
  if (image != null) {
    print("----------------------------" + image.path);
    imagePath = File(image.path);
    update();
  } else {
    print("---------------------------- Please select image");
  }
}


}

and the main file

floatingActionButton: FloatingActionButton(
        elevation: 5,
        onPressed: (() {
          alertAddProduct();
        }),
        child: const Icon(Icons.add),
      ),

In case You are trying to make any updates in dialog update(); method will not work because till I know this method can update the context only not any kind of overlay,
so if you want to update the image after selecting Show in the dialog you have to rebuild it so it can reflect your image.

showDialog(
  context: context,
  builder: (context) {
    String contentText = "Content of Dialog";
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          title: Text("Title of Dialog"),
          content: Text(contentText),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  contentText = "Changed Content of Dialog";
                });
              },
              child: Text("Change"),
            ),
          ],
        );
      },
    );
  },
);

change you imagePath variable to obs and wrap the UI with OBX

eg:
In the Controller

var imagePath = ''.obs ;
....
imagePath.value = File(image.path);
// update ---> remove update line

In the UI wrap with Obx eg:

....
Obx(()=>Container(
child: 
//Add string instead of null on comparing 
controller.imagePath.value != '' ? 
Image.file(controller.imagePath.value,errorBuilder: 
(context, error, stackTrace) {
return const Text("Bruh");},) : const Text("Pick 
image")
)),
....