Flutter如何实现仅用户输入合法登录凭证后才显示登录按钮

实现方案 #

1. 调整变量初始状态
   把控制按钮显示的布尔变量初始值改为false，保证页面加载时按钮默认隐藏：

// 修改前 bool _canShowButton = true;
bool _canShowButton = false;

2. 新增表单实时校验方法
   添加一个全局校验表单的方法，每次用户输入时调用，判断是否满足显示按钮的条件，原来的_hideWidget方法已经不需要，可以直接删除：

void _checkFormValid() {
  // 校验表单所有字段是否都符合规则
  bool isValid = _formKey.currentState?.validate() ?? false;
  setState(() {
    _canShowButton = isValid;
  });
}

3. 给输入框绑定输入监听
   在邮箱、密码两个TextFormField组件中都添加onChanged回调，用户每输入一个字符就触发一次表单校验，和你原有设置的AutovalidateMode.onUserInteraction逻辑完全兼容：

// 邮箱输入框添加对应属性
TextFormField(
  // 原有decoration、validator等属性不变
  onChanged: (_) => _checkFormValid(),
)

// 密码输入框添加对应属性
TextFormField(
  // 原有decoration、validator等属性不变
  onChanged: (_) => _checkFormValid(),
)

4. 修正登录按钮逻辑&补全布局

• 把按钮的onPressed回调从调用_hideWidget改成调用_submit，点击按钮直接触发登录逻辑
• 你当前代码里键盘弹出的布局分支（_isKeyboardVisible == true时返回的Scaffold）没有放置登录按钮，需要把登录按钮的代码也复制到这个分支的Form组件末尾，保证键盘弹出时输入合法也能看到按钮。

修改后的按钮代码参考：

Padding(
  padding: const EdgeInsets.only(top: 10),
  child: Container(
    width: MediaQuery.of(context).size.width - 70,
    height: MediaQuery.of(context).size.height * 0.09,
    child: !_canShowButton ? SizedBox.shrink() : TextButton(
      style: TextButton.styleFrom(
        primary: Colors.white,
        backgroundColor: color,
        elevation: 5,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))
      ),
      onPressed: _submit, // 改为调用登录提交方法
      child: Text('Anmelden')
    ),
  ),
),

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