How can i build a form with one textfield at the time?

Question

I was trying to make a form that shows one field at the time that acomplishes the next things:

When pressing a "next" button, it validates the field and let the user go to the next field if everything is ok.
When the user presses the next button in the keyboard it should do the same.
If possible, a sliding animation between fields.

What i came up with was something like this:

List questions = [List of textFieldForm]
int pageCount = 0;
GlobalKey _formKey = GlobalKey();

    pickSection(pageCount) {
      return questions[pageCount];
    }

 Widget build(BuildContext context) {
   return Form(
              key: _formKey,
              child: Column(
                  children: [
                    pickSection(widget.pageCount),
                    Container(
                        child: Row(children: [
                          Container(
                            width: screenWidth * 0.4,
                            child: TextButton(
                              onPressed: widget.pageCount == 0
                                  ? null
                                  : () {
                                      setState(() {
                                        widget.pageCount--;
                                      }),
                              child: Text("BACK"),
                            ),
                          ),
                          Container(
                            width: screenWidth * 0.4,
                            child: TextButton(
                              onPressed: () {
                                if (_formKey.currentState!.validate()) {
                                  if (widget.pageCount == questions.length - 1) {
                                    print("FORM ENDS");
                                  } else {
                                    setState(() {
                                      widget.pageCount++;
                                    });
                                  }
                                }
                              },
                              child: Text("NEXT"),
                            ),
                          ),
                        ])
                      ),
                  ]),
              ),
}

This way i validate every field when it's index is called since i treat every widget as it's own form, but i couldn't think of a way to implement an animation, or make the field advance using the next button on the keyboard(again, because this treats every field as it's own form).

Please help me figure out how to implement this. Animation is not important but using the next button to advance fields is crucial.

Thanks in advance.

user_11445727 · Answer

You can achieve this using Visibility widget(which is used to show a widget on condition) and maintaining flags.

bool goToNextField = false;

   TextButton(
                          onPressed: () {
                            if (_formKey.currentState!.validate()) {
                              goToNextField = true;
                              if (widget.pageCount == questions.length - 1) {
                                print("FORM ENDS");
                              } else {
                                setState(() {
                                  widget.pageCount++;
                                });
                              }
                            }
                          },

And in the next widget use a Visibility widget

 Widget nextField () {
    return Visibility(
     visible: goToNextField,
     child :
     // what you want to show when next button is pressed
  );
}

How can i build a form with one textfield at the time?

1 Answers