Flutter TextFormField双校验、后缀图标显隐及路由跳转问题求解

问题1：仅输入至少1字符后展示后缀图标 #

修改InputDecoration的suffix配置，新增输入框内容非空的判断，空输入时直接返回null即可隐藏后缀图标：

suffix: _controller.text.isEmpty 
    ? null 
    : (hasMinLengthUnique
        ? IconButton(icon: Icon(Icons.check_circle, color: Colors.green))
        : IconButton(icon: Icon(Icons.cancel, color: Colors.red))),

问题2：分场景展示错误提示 #

首先在类内新增状态变量存储用户名唯一性校验结果：

// null代表未校验/校验中，false代表重复，true代表唯一
bool? _isUsernameUnique;

修改validator逻辑，优先判断长度错误，再判断唯一性错误：

validator: (value) {
  if (value != null && value.isNotEmpty && value.length < 3) {
    return "请输入至少3位用户名";
  }
  if (_isUsernameUnique == false) {
    return "该用户名很受欢迎，请尝试其他名称";
  }
  return null;
},

后续对接后端校验时，在输入长度≥3时调用唯一性校验接口，接口返回后更新_isUsernameUnique和hasMinLengthUnique的状态即可：

onChanged: (value) async {
  bool tempIsValid = false;
  bool? tempUnique = _isUsernameUnique;
  if (value.length >= 3) {
    // 此处替换为实际后端校验逻辑
    // tempUnique = await checkUsernameUniqueApi(value);
    tempIsValid = tempUnique == true;
  }
  setState(() {
    _isUsernameUnique = tempUnique;
    hasMinLengthUnique = tempIsValid;
  });
},

问题3：基于状态控制页面跳转 #

修改ElevatedButton的onPressed回调，通过三元运算符判断仅当hasMinLengthUnique为true时执行跳转逻辑：

onPressed: () {
  hasMinLengthUnique ? Navigator.push(context, _createRoute()) : null;
},

如果需要同步把按钮置灰不可点击，也可以直接把判断逻辑绑定到onPressed属性上：

onPressed: hasMinLengthUnique ? () => Navigator.push(context, _createRoute()) : null,

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