如何在Flutter中将用户输入数据从页面传递到页面? [英] How do I pass user input data from page to page in Flutter?

问题描述

我正在Flutter中编写一个应用程序，并试图进行一个2页的注册过程.第1页是他们的电子邮件，密码和重复密码，第2页是有关他们帐户的其他详细信息.这是个人项目的一部分.

I am writing an app in Flutter and am trying to do a 2 page sign up process. Page 1 is their email, password and repeat password, and Page 2 is additional details about them for their account. This is part of a personal project.

我正在尝试将数据从第一个注册页面传递到第二个页面.用户填写完第二页并按后注册.然后对数据进行整理，并在身份验证"和FireStore数据库中创建一个FirebaseUser.

I am trying to pass the data from the first sign up page, to the second. Once the user fills out the second page and presses sign up. The data is then collated and a FirebaseUser is created in Authentication and in the FireStore database.

a)这是正确的方法吗?AKA将数据从一页传递到另一页.然后完成注册，但是如果用户在完成第二页之前存在，则他们尚未创建帐户.

a) Is this the right way to do it? AKA passing data from one page to the other. Then completing signup then, but if a user exists before completing second page then they have not created an account.

b)我是否应该仅将第二页上的信息添加到第一页上创建的帐户?对我来说，这是有道理的，但是我正在考虑可用性，一个没有完成完整注册过程的用户可能不希望为他们设置帐户.

b) Should I instead just be adding information on the second page to the account created on the first? To me this makes sense, but I'm thinking in terms of usability, a user who doesn't complete the full sign up process, likely did not want an account set up for them.

我已经尝试了无数教程来将数据从一页传递到另一页，但是我总是会遇到与无效的构造函数名称有关的错误，与const错误有关的信息，或者我只是创建新对象并进行传递而烦恼.

I have tried countless tutorials on passing data from one page to another, however I always get errors relating to invalid constructor names, to const errors, or I go down a rabbit hole of just creating new objects and passing things along.

Signup.dart(第1页)

Signup.dart (Page 1)

try {
          await FirebaseAuth.instance.createUserWithEmailAndPassword(email: _email, password: _password)
            .then((user) => {
              Firestore.instance.collection('users').document(user.user.uid).setData({"email": _email, "password": _password}),
            });
            Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => ExtraSignUpInfo()));

ExtraSignUpInfo.dart(第2页)

ExtraSignUpInfo.dart (Page 2)

class ExtraSignUpInfo extends StatefulWidget {
  @override
  _ExtraSignUpInfoState createState() => _ExtraSignUpInfoState();
}

class _ExtraSignUpInfoState extends State<ExtraSignUpInfo> {
  String _name;
  String _company;
  String _jobTitle;
  String _teamName;
  String _industry;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {

我希望将刚创建的用户发送到ExtraSignUpInfo()页面，以便稍后在填写ExtraSignUpInfo()页面表单字段之后创建电子邮件和密码.

I want the user just created to be sent to ExtraSignUpInfo() page, so then the email and password can be created later after ExtraSignUpInfo() page form fields are filled in.

推荐答案

您也可以尝试使用

You could also try using a stepper widget where you collect the email, password, etc. on successive steps in sort of a form "wizard." There are many variants (Google 'stepper widget').

这是一个非常基本的设置，添加了一个 TextFormField ，您可以使用它并将验证添加到:

Here is a very basic setup adding a TextFormField you can use and add validation to:

import 'package:flutter/material.dart';

class StepperForm extends StatefulWidget {
  static Future<void> show(BuildContext context) async {}

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

class _StepperFormState extends State<StepperForm> {
  ///Stepper variables and functions
  //declare the currentStep (starting point) as an int 0
  int _currentStep = 0;

  //Create a list of steps. Use TextFormFields for the email/password. Add validation if needed.
  List<Step> _myStepperForm() {
    List<Step> _steps = [
      Step(
        title: Text("Enter Your Email"),
        //state: StepState.complete,
        isActive: _currentStep >= 0,
        content: TextFormField(
          decoration: InputDecoration(
            labelText: 'Email',
            suffixIcon: Icon(Icons.email),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          validator: (value) =>
          value.isNotEmpty ? null : 'email can\'t be empty',
          //Additional validation code as needed
        ),
      ),
      Step(
        title: Text("Second"),
        isActive: _currentStep >= 1,
        content: Text("My Second Example"),
      ),
      Step(
        title: Text("Third"),
        isActive: _currentStep >= 2,
        content: Text("My Third Example"),
      ),
      Step(
        title: Text("Fourth"),
        isActive: _currentStep >= 3,
        content: Text("My Fourth Example"),
      ),
    ];
    return _steps;
  }

  //Create function for continue button
  onStepContinue() {
    setState(() {
      if (this._currentStep < this._myStepperForm().length - 1) {
        this._currentStep = this._currentStep + 1;
      } else {
        //Completion Code
        print('The form is complete.');
      }
    });
  }

  //create cancel function
  onStepCancel() {
    setState(() {
      if (this._currentStep > 0) {
        this._currentStep = this._currentStep - 1;
      } else {
        this._currentStep = 0;
      }
    });
  }

  //Create the Stepper Widget
  Widget _stepperWidget() => Container(
        margin: EdgeInsets.only(top: 10),
        color: Colors.orangeAccent,
        child: Stepper(
          //type: StepperType.horizontal,
          currentStep: this._currentStep,
          steps: _myStepperForm(),
          onStepCancel: onStepCancel,
          onStepContinue: onStepContinue,
          onStepTapped: (step) {
            setState(() {
              this._currentStep = step;
            });
          },
        ),
      );

 //Call Stepper Function in Scaffold. SingleChildScrollView helps with different screen sizes 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Stepper Form'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _stepperWidget(),
            SizedBox(height: 600)
          ],
        ),
      ),
    );
  }
}

这篇关于如何在Flutter中将用户输入数据从页面传递到页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！