validation - Flutter 验证和赋值

Question

我希望向我的应用程序添加验证，但我不知道要保存 TextFormField 中的数据并将其分配给 _email 和 _password。我对 Flutter 中的编码非常陌生……或者根本不熟悉编码，非常感谢帮助。

谁能给我一些建议，告诉我该怎么做并验证数据？

这是我到目前为止所拥有的，但我无法将 TextFormFields 中的任何数据放入分配的 String 值中以使用它们进行验证。

import 'package:flutter/material.dart';
import 'package:ursussupport/home_page.dart';

class LoginPage extends StatefulWidget {
  static String tag = 'login-page';
  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final scaffoldKey = GlobalKey<ScaffoldState>();
  final formKey = GlobalKey<FormState>();

  String _email;
  String _password;

  void _onSubmit() {
    final form = formKey.currentState;

    if (form.validate()) {
      form.save();

      // Email & password matched our validation rules
      // and are saved to _email and _password fields.
      _performLogin();
    }
  }

  void _performLogin(){

      Navigator.of(context).pushNamed(HomePage.tag);

  }


  @override
  Widget build(BuildContext context) {

    final logo = Hero(
      tag: 'avatar',
      child: CircleAvatar(
        backgroundColor: Colors.transparent,
        radius: 90.0,
        child: Image.asset('assets/niishaw2.jpg'),
      ),
    );

    final email = TextFormField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      decoration: InputDecoration(
          hintText: 'Enter Email',
          contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
          labelText: null,
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(32.0)
          )
      ),
    );

    final password = TextFormField(
      autofocus: false,
      obscureText: true,
      decoration: InputDecoration(
          hintText: 'Enter Password',
          contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(32.0)
          )
      ),
    );

    final loginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 16.0),
      child: Material(
          borderRadius: BorderRadius.circular(30.0),
          shadowColor: Colors.lightBlueAccent.shade100,
          elevation: 5.0,
          child: MaterialButton(
            minWidth: 200.0,
            height: 42.0,
            onPressed: _performLogin,
            color: Colors.lightBlueAccent,
            child: Text('Login', style: TextStyle(color: Colors.white)),
          )
      ),
    );

    final forgotLabel = FlatButton(
      child: Text(
        'Forgot Password?',
        style: TextStyle(color: Colors.black54),
      ),
      onPressed: (){

      },
    );


    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: ListView(
          shrinkWrap: true,
          padding: EdgeInsets.only(left: 24.0, right: 24.0),
          children: <Widget>[
            logo,
            SizedBox(height: 50.0),
            email,
            SizedBox(height: 8.0),
            password,
            SizedBox(height: 24.0),
            loginButton,
            forgotLabel
          ],
        ) ,
      ),
    );
  }
}

标签： validationdartflutter

Answer 1

您可以使用 TextField 它具有 onChanged 属性，因此您可以执行此操作，它会为您完美工作。使用此代码示例

  final email = TextField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      decoration: InputDecoration(
          hintText: 'Enter Email',
          contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
          labelText: null,
      ),
      onChanged: (String str){
        setState((){
          email = str;
        });
      },
    );

您可以在代码中简单地添加上面显示的onChanged 属性。