尝试验证 TextFormField 输入时出现异常

Question

我正在尝试在我的项目中验证两个TextFormFields（电子邮件和密码）。但是在验证TextFormField 时出现异常。有人可以让我知道我哪里出错了吗？或者如何修复错误。

我得到的错误是：════════ Exception caught by gesture ═══════════════════════════════════════════ Null check operator used on a null value ════════════════════════════════════════════════════════════════════════════════

我的代码：

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    final _formKey = GlobalKey<FormState>();

    TextEditingController emailController;
    TextEditingController passwordController;
    final authService = Provider.of<AuthService>(context);
    emailController = TextEditingController();
    passwordController = TextEditingController();
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
          child: Column(children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(top: 60.0),
          child: Center(
            child: Container(
                width: 300,
                height: 380,
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(50.0)),
                child: Image.asset(
                  'assets/images/logo.png',
                )),
          ),
        ),
        const SizedBox(height: 15.0),
        Padding(
          padding: EdgeInsets.only(left: 25.0, right: 25.0, top: 0, bottom: 0),
          child: TextFormField(
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter the email.';
              }
              return null;
            },
            controller: emailController,
            decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(60),
                ),
                prefixIcon: const Icon(Icons.mail),
                labelText: 'E-Mail',
                hintText: 'admin@gmail.com'),
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 25.0, right: 25.0, top: 15, bottom: 0),
          child: TextFormField(
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter the password.';
              }
              return null;
            },
            controller: passwordController,
            obscureText: true,
            decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(60),
                ),
                prefixIcon: const Icon(Icons.vpn_key),
                labelText: 'Password',
                hintText: 'Enter your Password'),
          ),
        ),
        const SizedBox(
          height: 100,
        ),
        TextButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Processing')),
                );
              }
              authService.signInWithEmailAndPassword(context,
                  emailController.text.trim(), passwordController.text.trim());
            },
            child: const Text(
              'Login',
              textAlign: TextAlign.center,
            )),
        MaterialButton(
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => forgotPassword()));
            },
            child: Text(
              'Forgot Password',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 13.0, color: Colors.red.shade900),
            ))
      ])),
    );
  }
}

提前谢谢你。

Answer 1

在您的 sn-p 中没有使用 _formKey 的 Form 小部件，这就是它从 _formKey.currentState!.validate() 抛出错误的原因。因为您使用的是!，它说currentState of formKey 永远不会为空。

你可以先检查空状态来处理它。

 TextButton(
             onPressed: () {
               if (_formKey.currentState == null) {
                 return; // dont execute rest code
               }
               if (_formKey.currentState!.validate()) {
                 ScaffoldMessenger.of(context).showSnackBar(
                   const SnackBar(content: Text('Processing')),
                 );
               authService.signInWithEmailAndPassword(context, 
              emailController.text.trim(),
               passwordController.text.trim());
               },

将Form 小部件放在Column 小部件之前。

   body: SingleChildScrollView(
          child: Form(
        key: _formKey,
        child: Column(children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 60.0),
            child: Center(

更多关于forms validation

Answer 2

您导致此错误是因为您在代码中定义了 _formkey 但未定义 used，因此它没有任何 value 或 State 现在您必须包装您的 TextFormField 在Form小部件中，需要传递定义的key，可以查看下面的代码

final _formKey = GlobalKey<FormState>();

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {

    TextEditingController emailController;
    TextEditingController passwordController;
    final authService = Provider.of<AuthService>(context);
    emailController = TextEditingController();
    passwordController = TextEditingController();
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
          child: Column(children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 60.0),
              child: Center(
                child: Container(
                    width: 300,
                    height: 380,
                    decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(50.0)),
                    child: Image.asset(
                      'assets/images/logo.png',
                    )),
              ),
            ),
            const SizedBox(height: 15.0),
            Form(
              key: _formKey,
              child: Padding(
                padding: EdgeInsets.only(left: 25.0, right: 25.0, top: 0, bottom: 0),
                child: TextFormField(
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Please enter the email.';
                    }
                    return null;
                  },
                  controller: emailController,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(60),
                      ),
                      prefixIcon: const Icon(Icons.mail),
                      labelText: 'E-Mail',
                      hintText: 'admin@gmail.com'),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 25.0, right: 25.0, top: 15, bottom: 0),
              child: TextFormField(
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter the password.';
                  }
                  return null;
                },
                controller: passwordController,
                obscureText: true,
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(60),
                    ),
                    prefixIcon: const Icon(Icons.vpn_key),
                    labelText: 'Password',
                    hintText: 'Enter your Password'),
              ),
            ),
            const SizedBox(
              height: 100,
            ),
            TextButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Processing')),
                    );
                  }
                  authService.signInWithEmailAndPassword(context,
                      emailController.text.trim(), passwordController.text.trim());
                },
                child: const Text(
                  'Login',
                  textAlign: TextAlign.center,
                )),
            MaterialButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => forgotPassword()));
                },
                child: Text(
                  'Forgot Password',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 13.0, color: Colors.red.shade900),
                ))
          ])),
    );
  }
}