flutterflutter-getxflutter-navigationflutter-routes

Flutter GetX pass data to another page


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