Flutter - Getx Value updates only after hot reload

Question

Consider the following code

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
        init: HomeController(),
        builder: (controller) {
          return Scaffold(
            body: SafeArea(
              child: Column(
                children: [
                  phoneWidget(),
                  TextFormField(
                    controller: controller.formController,
                  ),

                  ElevatedButton(onPressed: ()=> controller.clearForm(), child: const Text('Clear'))
                ],
              ),
            ),
          );
        });
  }

  Widget phoneWidget() {
    final HomeController _controller = Get.find();
    return  Container(
        decoration: BoxDecoration(
          color: Colors.amber,
          borderRadius: BorderRadius.circular(20)
        ),
        child: IntlPhoneField(  // the widget in question
          controller:_controller.secondController ,
          showCountryFlag: false,
          iconPosition: IconPosition.trailing,
          autoValidate: false,
          initialValue: _controller.initialPhoneNumber,
          initialCountryCode: _controller.initialCountryCode,
        ),
      );
  }
}

In the above i have a widget. which I'm setting initial values at init on controller.

class HomeController extends GetxController{

  final _intialCountryCode = ''.obs;
  String get initialCountryCode => _intialCountryCode.value;

  final _initialPhoneNumber = ''.obs;
  String get initialPhoneNumber => _initialPhoneNumber.value;

  final formController = TextEditingController();
  final secondController = TextEditingController();

  @override
  void onInit() {
    super.onInit();
    _intialCountryCode('IN');
    _initialPhoneNumber('123457788');
    formController.text = "TEST";
    secondController.text = '1234944627';
  }

  clearForm(){
    formController.clear();
    secondController.clear();
    secondController.text = '123349526';
  }
}

I'm using Getx for my application. I'm assigning values for this widget on init. What I'm expecting is to the widget shows the initial value when the screen is loaded. How ever the changes are not reflected on the widget, instead if I hot-reload, the changes are updated on the widget. I have tried wrapping the widget with Obx. but the results are same. The changes are made only after hot reload. What causes this? Why does the widget only updates after hot reload? How can i resolve this properly

Answer 1

class HomeController extends GetxController{

  final _intialCountryCode = ''.obs;
  String get initialCountryCode => _intialCountryCode.value;

  final _initialPhoneNumber = ''.obs;
  String get initialPhoneNumber => _initialPhoneNumber.value;

  final formController = TextEditingController().obs;
  final secondController = TextEditingController().obs;

  @override
  void onInit() {
    super.onInit();
    _intialCountryCode('IN');
    _initialPhoneNumber('123457788');
    formController.text = "TEST";
    secondController.text = '1234944627';
  }

  clearForm(){
    formController.clear();
    secondController.clear();
    secondController.text = '1234944627';
  }
}

GetX<HomeController>(
        init: HomeController(),
        builder: (controller) {

try adding this changes and see if it works