为什么未验证表格？验证器的颤动形式验证

Question

import 'package:flutter/material.dart';
import 'package:sumanthk07/utilities/routes.dart';

class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);

@override
State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
final _formkey = GlobalKey<FormState>();

// ignore: avoid_types_as_parameter_names, non_constant_identifier_names
moveToHome(BuildContext) async{
Navigator.pushNamed(context, MyRoutes.homeRoute);
}

 @override
Widget build(BuildContext context) {
  return Material(
    color: Colors.white,
    child: SingleChildScrollView(
    child: Form(
       key: _formkey,
      child: Column(
        children: [
          Image.asset("assets/images/login.png", fit: BoxFit.cover),
          const SizedBox(
            height: 20.0,
          ),
          const Text(
            'Welcome',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            height: 20.0,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(
                vertical: 16.0, horizontal: 32.0),
            child: Column(
              children: [
                TextFormField(
                  decoration: const InputDecoration(
                      hintText: "Enter User name", labelText: "Username "),
                      initialValue: "",
                  validator: (String? value) {
                    if (value !=null && value.isEmpty ) {
                      return "User name cannot be empty";
                    }
                    return null;
                  },
                  onChanged: (value) {
                    setState(() {});
                  },
                ),
                TextFormField(
                  obscureText: true,
                  decoration: const InputDecoration(
                      hintText: "Enter password", labelText: "Password "),
                      initialValue: "",
                  validator: (String? value) {
                    if (value !=null && value.isEmpty ) {
                      return "Password name cannot be empty";
                    }
                    return null;
                  },
                ),
                const SizedBox(
                  height: 20.0,
                ),

                InkWell(
                  onTap: () => moveToHome(context),
                  child: AnimatedContainer(
                    duration: const Duration(seconds: 1),
                    height: 40,
                    width: 80,
                    alignment: Alignment.center,
                    child: const Text("Login",
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        )),
                    decoration: BoxDecoration(
                        color: Colors.red,
                        // ignore: unnecessary_const
                        borderRadius: BorderRadius.circular(20)),
                  ),
                )

                // ElevatedButton(
                //   child: const Text("Login"),
                //   style: TextButton.styleFrom(),
                //   onPressed: () {
                //     // ignore: unused_local_variable
                //     var myRoutes = MyRoutes;
                //     Navigator.pushNamed(context, MyRoutes.homeRoute);
                //   },
                // )
              ],
            ),
          )
        ],
      ),
    ),
  ),
 );
}

 BorderRadius newMethod() => BorderRadius.circular(20);
 }

大家好，我是一个初学者，我正在尝试将验证器添加到窗口小部件中，但是在运行应用程序时，我没有得到验证。

我搜索并尝试了做到这一点的方法，但没有得到预期的结果。

你们能查看我的代码并以正确的方式提出建议。

没有发现错误，但是验证不起作用。

Answer 1

首先将TexteditingController分配给您的两个字段。

  final TextEditingController _controllerUserName = TextEditingController();
  final TextEditingController _controllerPassword = TextEditingController();

并且还将AutovalIdateMode分配到您的文本字段，因此您可以在用户输入上验证。它不是可选的，但您可以添加它以在输入字段更改上验证您的字段。尽管您可以在提交时间验证表格。

TextFormField(
              decoration: const InputDecoration(
                  hintText: "Enter User name", labelText: "Username "),
                  initialValue: "",
              validator: (String? value) {
                if (value !=null && value.isEmpty ) {
                  return "User name cannot be empty";
                }
                return null;
              },
              onChanged: (value) {
                setState(() {});
              },
              autovalidate : AutovalidateMode.onUserInteraction,
              controller:_controllerUserName
            ),

而且，您尚未在提交时间验证表格。尝试一下

moveToHome(BuildContext) async{
   if (_formkey.currentState.validate()) {
       Navigator.pushNamed(context, MyRoutes.homeRoute);
   }
 }