为什么表单没有被验证?验证器颤振表单验证

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

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

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