如何在Flutter中将用户输入数据从页面传递到页面?

时间:2019-11-04 23:40:40

标签: android ios firebase flutter

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

我正在尝试将数据从第一个注册页面传递到第二个。用户填写完第二页并按后注册。然后整理数据并在Authentication和FireStore数据库中创建一个FirebaseUser。

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

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

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

Signup.dart(第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页)

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()页面表单字段之后创建电子邮件和密码。

2 个答案:

答案 0 :(得分:0)

您可以尝试使用参数传递参数,并使用命名的路由调用将其发送到导航器,请参见烹饪书上的示例:

https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

1)在第二个屏幕中,您必须像这样创建ScreenArguments类:

class ScreenArguments {
  final String email;
  final String password;

  ScreenArguments(this.email, this.password);
}

2)在第二个屏幕本身上启动var:

  String email;
  String password;

3)从第一个屏幕上的按钮(例如)调用导航器,发送值:

Navigator.pushNamed(context, "/secondScreen", arguments: email, password)

*将命名路由添加到您的main.dart中,以使其起作用。

4)使用从screen1发送到screen2的值。

希望有帮助。

答案 1 :(得分:0)

您也可以尝试使用soapType,以连续的步骤以“向导”的形式收集电子邮件,密码等。有很多变体(Google“步进器小部件”)。

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

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)
          ],
        ),
      ),
    );
  }
}