Home > Back-end >  Flutter GetX pass data to another page
Flutter GetX pass data to another page

Time:11-07

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

CodePudding user response:

You need to wrap your TextFormField with a Form widget. Then create a form key of type GlobalKey and initialise it in the initState function of the Stateful widget.

in the key property of Form widget, use this GlobalKey.

in the TextFormField widget, use the onSaved property to pass a function to save the value of the form field wherever you want. Only after you call onSaved is the data ever saved anywhere, so you need to use this to save the data to the _phoneNumberController variable in your Getx Controller.

Right now, the data is not being saved and the controller is null, that's why it throws an exception when you call argumentData. its value is null because the _phoneNumberContoller text value is also null.

Sorry id the formatting is bad, I'm using my phone to type this.

  • Related