如何在flutter中获取TextField值

N S*_*rma 24 android ios flutter

嗨,我已经在颤动中创建了注册屏幕.我想获得的电子邮件和密码在onPressed的FlatButton.

有人知道如何在颤动中这样做吗?

  Widget SignupPage() {
    return new Scaffold(body: Container(
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        color: Colors.white,
        image: DecorationImage(
          colorFilter: new ColorFilter.mode(
              Colors.black.withOpacity(0.05), BlendMode.dstATop),
          image: AssetImage('assets/images/mountains.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: new Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(100.0),
            child: Center(
              child: Icon(
                Icons.headset_mic,
                color: Colors.redAccent,
                size: 50.0,
              ),
            ),
          ),
          new Row(
            children: <Widget>[
              new Expanded(
                child: new Padding(
                  padding: const EdgeInsets.only(left: 40.0),
                  child: new Text(
                    "EMAIL",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.redAccent,
                      fontSize: 15.0,
                    ),
                  ),
                ),
              ),
            ],
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: Colors.redAccent,
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  child: TextField(
                    obscureText: true,
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'PLEASE ENTER YOUR EMAIL',
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: 24.0,
          ),
          new Row(
            children: <Widget>[
              new Expanded(
                child: new Padding(
                  padding: const EdgeInsets.only(left: 40.0),
                  child: new Text(
                    "PASSWORD",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.redAccent,
                      fontSize: 15.0,
                    ),
                  ),
                ),
              ),
            ],
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: Colors.redAccent,
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  child: TextField(
                    obscureText: true,
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: '*********',
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: 24.0,
          ),
          new Row(
            children: <Widget>[
              new Expanded(
                child: new Padding(
                  padding: const EdgeInsets.only(left: 40.0),
                  child: new Text(
                    "CONFIRM PASSWORD",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.redAccent,
                      fontSize: 15.0,
                    ),
                  ),
                ),
              ),
            ],
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: Colors.redAccent,
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  child: TextField(
                    obscureText: true,
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: '*********',
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: 24.0,
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 20.0),
                child: new FlatButton(
                  child: new Text(
                    "Already have an account?",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.redAccent,
                      fontSize: 15.0,
                    ),
                    textAlign: TextAlign.end,
                  ),
                  onPressed: () => {},
                ),
              ),
            ],
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 50.0),
            alignment: Alignment.center,
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    color: Colors.redAccent,
                    onPressed: () => authHandler.handleSignInEmail(emailController.text, passwordController.text)
                        .then((FirebaseUser user) {
                      Navigator.push(context, new MaterialPageRoute(builder: (context) => HomePage()));
                    }).catchError((e) => print(e)),
                    child: new Container(
                      padding: const EdgeInsets.symmetric(
                        vertical: 20.0,
                        horizontal: 20.0,
                      ),
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Expanded(
                            child: Text(
                              "SIGN UP",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ));
  }
Run Code Online (Sandbox Code Playgroud)

die*_*per 41

TextEditingController在您的State类中创建您的全局变量并将其设置为您的TextField小部件.

TextEditingController emailController = new TextEditingController();

....


TextField(
  controller: emailController,
  obscureText: true,
  textAlign: TextAlign.left,
  decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'PLEASE ENTER YOUR EMAIL',
    hintStyle: TextStyle(color: Colors.grey),
  ),
)
Run Code Online (Sandbox Code Playgroud)

现在您可以使用以下方法获取值:

emailController.text
Run Code Online (Sandbox Code Playgroud)

  • 我有 3 个 TextField,我需要 3 个 TextEditingController? (4认同)
  • 是的,或者您可以使用每个文本字段的onChanged方法并将值保存到每个文本字段的本地变量中 (3认同)
  • @diegovoper 我在表单中有 10 个文本字段和下拉按钮字段。有什么方法可以获取所有元素的值吗?或者我是否必须通过 TextEditingController.text 函数逐一获取每个元素的值?请建议。谢谢。 (3认同)

小智 14

另一个更简单的(我认为)选项是在包含字符串的 TextField 类中添加“onChanged”属性

String enteredText .... TextField( onChanged: (newText) { enteredText = newText; },

  • 每个更改的字符都会触发“onChanged”,对吗? (2认同)

Adi*_*wal 9

在构建方法之前创建 TextEditingController。

TextEditingController yourControllerName = new TextEditingController();
Run Code Online (Sandbox Code Playgroud)

然后在 TextField 中传递控制器,如下所示:

TextField(
           controller: yourNameController,
           // your extra stuff
          )
Run Code Online (Sandbox Code Playgroud)

假设您想在文本中访问它,请像这样访问它:

Text(
     yourControllerName.text.toString(), // this will convert your controller to String
     )
Run Code Online (Sandbox Code Playgroud)

谢谢,希望能成功!!!


Din*_*ian 8

onChanged每当用户更改字段中的文本时,文本字段都会调用回调。如果用户指示他们已完成在字段中的输入(例如,通过按下软键盘上的按钮),则文本字段调用onSubmitted回调。

使用此回调,我们可以设置instance variables并使用onPress提交按钮上的这些变量。