CODEWITHSUNDEEP
firebaseflutterdart
Huzzi
Huzzi

Reputation: 571

Flutter form - multi screens

I need to have a registration form on app and it's quite long so how can I split the registration into 2 screens so that once you've completed the first screen you go to the next screen when yo click the next button. On the next screen all the form variables should be available form the previous page. On the second page I want to save all the variables to Google Firebase.

Any suggestions how this can be achieved?

Thanks in advance.

Upvotes: 1

Views: 3241

Answers (2)

Peter Haddad
Peter Haddad

Reputation: 80914

Inside the onPressed property that takes a Voidcallback. You can use the Navigator class t navigate to the next screen, for example:

Navigator.push(
   context,
  MaterialPageRoute(
   builder: (context) => Home(user: user
   ),                                           
  ),
 );

Where Home is the class of the second screen and the object user is the data sent in the constructor.

Upvotes: 3

J. S.
J. S.

Reputation: 9625

This is a very simplified example of how you can have data from TextFormFields from one view pass to the next view:

class FirstFormPage extends StatefulWidget {
  @override
  _FirstFormPageState createState() => _FirstFormPageState();
}

class _FirstFormPageState extends State<FirstFormPage> {
  TextEditingController _firstFormFieldController = TextEditingController();
  TextEditingController _secondFormFieldController = TextEditingController();
  TextEditingController _thirdFormFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextFormField(
          controller: _firstFormFieldController,
        ),
        TextFormField(
          controller: _secondFormFieldController,
        ),
        TextFormField(
          controller: _thirdFormFieldController,
        ),
        RaisedButton(
          child: Text('Next'),
          onPressed: () => Navigator.of(context).push(MaterialPageRoute(
            builder: (context) {
              return SecondFormPage([
                _firstFormFieldController.text,
                _secondFormFieldController.text,
                _thirdFormFieldController.text,
              ]);
            }
          )),
        )
      ],
    );
  }
}

class SecondFormPage extends StatefulWidget {
  final List<String> previousFields;

  SecondFormPage(this.previousFields);

  @override
  _SecondFormPageState createState() => _SecondFormPageState();
}

class _SecondFormPageState extends State<SecondFormPage> {
  TextEditingController _firstFormFieldController = TextEditingController();
  TextEditingController _secondFormFieldController = TextEditingController();
  TextEditingController _thirdFormFieldController = TextEditingController();

  List<String> allData = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextFormField(
          controller: _firstFormFieldController,
        ),
        TextFormField(
          controller: _secondFormFieldController,
        ),
        TextFormField(
          controller: _thirdFormFieldController,
        ),
        RaisedButton(
          child: Text('Next'),
          onPressed: submitData,
        )
      ],
    );
  }

  void submitData(){
    allData.addAll(widget.previousFields);
    allData.addAll([
      _firstFormFieldController.text,
      _secondFormFieldController.text,
      _thirdFormFieldController.text,
    ]);

    // Submit your data
  }
}

Upvotes: 3

Related Questions