flutter - 如何在颤动的textformfield边界内显示标签和错误消息？

Question

我在容器内使用文本和文本表单字段来获取用户名。我需要进行文本字段验证并获得错误消息和红色边界框，如预期结果图像所示。我也包括了当前的输出。我也尝试了其他一些方法。但没有任何效果。

电流输出

预期产出

    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        shape: BoxShape.rectangle,
        color: Color(0xFFF4F9FE),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 3, 0, 0),
            child: Text("Full Name",
              style: TextStyle(color: Color(0xFFA8C3EC)),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
            child: TextFormField(
              decoration: new InputDecoration(
                hintText: "Enter Your Full Name",
                border: InputBorder.none,
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                errorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: BorderSide(color:  Colors.red),
                ),
                disabledBorder: InputBorder.none,
                contentPadding: const EdgeInsets.symmetric(vertical: 1.0),
              ),
              validator: _validateName,
            ),
          ),
        ],
      ),
    );

String _validateName(String value) {
    return "Required field cannot be empty";
}

Answer 1

Flutter TextFormField 自己处理错误文本，所以我们不需要使用变量 _validate。它将在运行时检查您是否满足条件。

final confirmPassword = TextFormField(
  controller: widget.confirmPasswordController,
  obscureText: true,
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.lock_open, color: Colors.grey),
    hintText: 'Confirm Password',
    errorText: validatePassword(widget.confirmPasswordController.text),
    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
  ),
);

String validatePassword(String value) {
  if (!(value.length > 5) && value.isNotEmpty) {
    return "Password should contain more than 5 characters";
  }
  return null;
}

注意：用户必须添加至少一个字符才能收到此错误消息。更多信息