如何为Flutter文本字段添加验证并在验证通过后跳转页面？

实现用户名和密码输入框，要求用户输入内容后点击按钮可跳转至另一页面；若未输入则无法跳转。当前已基于TextField封装了CommonTextField组件，希望得到更简便的实现方式，同时完善跳转逻辑。

当前实现代码 #

页面布局代码 #

child: Column(
  children: <Widget>[
    HomeLogo(imageName: 'assets/images/logo1.jpg'),
    Padding(padding: EdgeInsets.only(bottom: 50)),
    CommonTextField(
        text: 'Username',
        controller: _usernameTextController,
        icon: Icons.person,
        hint: 'Please enter your username.'),
    Padding(padding: EdgeInsets.all(10)),
    CommonTextField(
        text: 'Password',
        controller: _passwordTextController,
        icon: Icons.password,
        hint: 'Please enter your password.'),
    Padding(padding: EdgeInsets.all(10)),
    new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton (
          style: ElevatedButton.styleFrom(minimumSize: Size(120,58),primary: Colors.blue),
          onPressed: (){}, child: Text('CLEAR'),),
        Padding(padding: EdgeInsets.only(left: 38, right: 38)),
        SignInButton(isSignIn: true, context: context, onTap: (){
          Navigator.push(context, MaterialPageRoute(builder: (builder) => HomeScreen(email: _usernameTextController.text,)));
        }),
      ],
    ),

自定义输入框组件 #

class CommonTextField extends StatelessWidget {
  final String text;
  final TextEditingController controller;
  final IconData icon;
  final String hint;

  const CommonTextField(
      {Key? key,
        required this.text,
        required this.controller,
        required this.icon,
        required this.hint})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      child: TextFormField(
        controller: controller,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          suffixIcon: Icon(icon),
          labelText: text,
          hintText: hint,
        ),
      ),
    );
  }
}

解决方案 #

1. 完善核心跳转逻辑 #

当前点击按钮直接跳转，未做输入校验。只需在按钮的onTap方法中判断用户名和密码是否为空，满足条件才执行跳转：

SignInButton(isSignIn: true, context: context, onTap: (){
  final username = _usernameTextController.text.trim();
  final password = _passwordTextController.text.trim();
  if (username.isNotEmpty && password.isNotEmpty) {
    Navigator.push(context, MaterialPageRoute(builder: (builder) => HomeScreen(email: username,)));
  }
}),

同时给CLEAR按钮补充清空输入框的功能：

ElevatedButton (
  style: ElevatedButton.styleFrom(minimumSize: Size(120,58),primary: Colors.blue),
  onPressed: (){
    _usernameTextController.clear();
    _passwordTextController.clear();
  }, 
  child: Text('CLEAR'),
),

2. 更简便的实现方式 #

方式一：用Form组件做规范表单验证

如果需要更严谨的校验（比如用户名长度、密码格式），可以用Form包裹输入框，结合GlobalKey做统一验证：

// 定义表单全局Key
final _formKey = GlobalKey<FormState>();

// 替换原有Column为Form
child: Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      HomeLogo(imageName: 'assets/images/logo1.jpg'),
      Padding(padding: EdgeInsets.only(bottom: 50)),
      CommonTextField(
          text: 'Username',
          controller: _usernameTextController,
          icon: Icons.person,
          hint: 'Please enter your username.',
          // 添加非空校验
          validator: (value) {
            if (value == null || value.trim().isEmpty) {
              return '请输入用户名';
            }
            return null;
          }),
      Padding(padding: EdgeInsets.all(10)),
      CommonTextField(
          text: 'Password',
          controller: _passwordTextController,
          icon: Icons.password,
          hint: 'Please enter your password.',
          // 添加非空校验
          validator: (value) {
            if (value == null || value.trim().isEmpty) {
              return '请输入密码';
            }
            return null;
          }),
      Padding(padding: EdgeInsets.all(10)),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton (
            style: ElevatedButton.styleFrom(minimumSize: Size(120,58),primary: Colors.blue),
            onPressed: (){
              _formKey.currentState?.reset();
              _usernameTextController.clear();
              _passwordTextController.clear();
            }, 
            child: Text('CLEAR'),
          ),
          Padding(padding: EdgeInsets.only(left: 38, right: 38)),
          ElevatedButton(
            style: ElevatedButton.styleFrom(minimumSize: Size(120,58),primary: Colors.blue),
            onPressed: (){
              if (_formKey.currentState!.validate()) {
                Navigator.push(context, MaterialPageRoute(builder: (builder) => HomeScreen(email: _usernameTextController.text,)));
              }
            },
            child: Text('SIGN IN'),
          ),
        ],
      ),
    ],
  ),
)

同时修改CommonTextField，新增validator参数支持校验：

class CommonTextField extends StatelessWidget {
  final String text;
  final TextEditingController controller;
  final IconData icon;
  final String hint;
  final String? Function(String?)? validator; // 新增校验参数

  const CommonTextField(
      {Key? key,
        required this.text,
        required this.controller,
        required this.icon,
        required this.hint,
        this.validator}) // 可选参数
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      child: TextFormField(
        controller: controller,
        validator: validator, // 绑定校验器
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          suffixIcon: Icon(icon),
          labelText: text,
          hintText: hint,
        ),
      ),
    );
  }
}

方式二：动态控制按钮状态（禁用/启用）

根据输入内容实时更新按钮可点击状态，提升用户体验：

// 定义状态变量标记是否可提交
bool _canSubmit = false;

// 在initState中添加输入监听
@override
void initState() {
  super.initState();
  _usernameTextController.addListener(_checkInput);
  _passwordTextController.addListener(_checkInput);
}

// 检查输入是否满足提交条件
void _checkInput() {
  final username = _usernameTextController.text.trim();
  final password = _passwordTextController.text.trim();
  setState(() {
    _canSubmit = username.isNotEmpty && password.isNotEmpty;
  });
}

// 按钮设置：不可点击时onTap设为null
SignInButton(
  isSignIn: true,
  context: context,
  onTap: _canSubmit ? (){
    Navigator.push(context, MaterialPageRoute(builder: (builder) => HomeScreen(email: _usernameTextController.text,)));
  } : null,
),

记得在页面销毁时移除监听：

@override
void dispose() {
  _usernameTextController.removeListener(_checkInput);
  _passwordTextController.removeListener(_checkInput);
  _usernameTextController.dispose();
  _passwordTextController.dispose();
  super.dispose();
}

内容的提问来源于stack exchange，提问作者sqreix