Flutter GetX pass data to another page

Issue

I have a flutter app whereby I capture data using a textformfield in a screen. I have a second screen where I would like to display the data that I have captured from the text form field in the first screen.

But first I want to print it to the terminal, from the Second Screen controller, and see what has been passed. I have tried using using GetX naviagtion and passing but I get this error

The method '[]' was called on null.
Receiver: null
Tried calling: [](0)

This is the text form field I use to get data as input

TextFormField(
                      controller: controller._phoneNumberController,
                      keyboardType: TextInputType.text,
                      validator: (value) => validatePhoneNumber(value!),
                      style: TextStyle(
                        color: accentColor,
                        fontSize: 15,
                        fontFamily: 'PoppinsRegular',
                      ),
                      decoration: InputDecoration(
                        hintText: "Phone Number",
                        hintStyle: TextStyle(
                            fontSize: 14,
                            color: Colors.black45,
                            fontWeight: FontWeight.w500),
                        fillColor: Color(0xffEBEDF4),
                        filled: true,
                        border: InputBorder.none,
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(
                            color: Color(0xff1D275C),
                          ),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: BorderSide(
                            color: formFieldColor,
                            width: 2.0,
                          ),
                        ),
                      ),
                    ),

This is the method I use to send data to the next page

GestureDetector(
                              onTap: () {
                                Get.to(SecondPage(), arguments: [
                                  controller._phoneNumberController.text
                                ]);
                              },
                              child: Container(
                                height: 40,
                                width: double.infinity,
                                decoration: BoxDecoration(
                                  color: Color(0xffEF5E41),
                                ),
                                child: Center(
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(right: 130),
                                        child: Text(
                                          "Proceed",
                                          style: TextStyle(
                                            color: Color(0xffFCFCFC),
                                            fontSize: 14,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ),
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(right: 16),
                                        child: Icon(
                                          Icons.arrow_forward_ios,
                                          color: Color(0xffFCFCFC),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ),

This is where I try to print the data sent from the first page

  dynamic argumentData = Get.arguments;

  @override
  void onInit() {
    print(argumentData[0]);
    super.onInit();
  }

How can I fix this

Solution

I know you have an accepted answer here but just want to chime in with a different and arguably easier way that doesn’t involve passing arguments around or keys.

Any TextEditingController that lives in a GetX class is accessible from anywhere.

Add a listener and store that value into a variable.

class Controller extends GetxController {
  final textController = TextEditingController();

  RxString controllerText = ''.obs;

  @override
  void onInit() {
    super.onInit();
    textController.addListener(() {
      controllerText.value = textController.text;
    });
  }
}

You can test this with a couple simple pages.

class Page1 extends StatelessWidget {
  static const id = '/page1';
  final controller = Get.put(Controller());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextField(controller: controller.textController),
            ElevatedButton(
              onPressed: () => Get.toNamed(Page2.id),
              child: Text('Go to page 2'),
            ),
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  static const id = '/page2';

  @override
  Widget build(BuildContext context) {
    final controller = Get.find<Controller>();
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            // Obx technically isn't needed for this example because 
            // Page2 builds after the value is updated
            child: Obx(
              () => Text(controller.controllerText
                  .value), 
            ),
          ),
          ElevatedButton(
            onPressed: () => Get.back(),
            child: Text('Go to page 1'),
          ),
        ],
      ),
    );
  }
}

enter image description here

Answered By – Loren.A

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *