Flutter - 验证错误消息显示在文本框中

Question

我正在创建一个登录页面。如果电子邮件格式不正确，我会尝试将错误验证消息显示为无效电子邮件。问题是，文本框内显示错误消息，如果显示错误消息，则文本框大小正在扩展

      TextFormField(
      controller: emailController,
      autocorrect: true,
      validator: (value) {
        if (value.isEmpty) {
          return 'Please enter your credential';
        } else if (userExistR == false) {
          return "Email ID not registered";
        }
        return null;
      },
      decoration: InputDecoration(
        // helperText: " ",
        contentPadding: EdgeInsets.symmetric(
            vertical: (snapshot.hasData) ? 24 : 18, horizontal: 15.0),
        prefixIcon: Padding(
          padding: const EdgeInsetsDirectional.only(end: 8.0),
          child: Icon(Icons.email),
        ),
        labelText: "Email address",
        hintText: 'xxxxx@xxx.xx',
        fillColor: Colors.white,
        enabledBorder: const OutlineInputBorder(
          borderSide:
              const BorderSide(color: Colors.transparent, width: 0.0),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide:
              const BorderSide(color: Colors.transparent, width: 0.0),
        ),
        errorBorder: const OutlineInputBorder(
          borderSide:
              const BorderSide(color: Colors.transparent, width: 0.0),
        ),
        border: new OutlineInputBorder(
            borderRadius: new BorderRadius.circular(15.0),
            borderSide: new BorderSide(color: Colors.blueGrey)),
        errorText: validateEmail(emailController.text),
      ),
      keyboardType: TextInputType.emailAddress,
      maxLines: 1,
      style: TextStyle(fontSize: 16.0),
    );

Answer 1

您在堆栈的帮助下创建使用自定义 TextField，这是我使用的一个：

Stack(
    alignment: Alignment.bottomLeft,
    children: <Widget>[
      TextField(
        textAlignVertical: TextAlignVertical.center,
        controller: controller,
        decoration: InputDecoration(
          hintText: hintText,
          suffixIcon: icon != null
              ? IconButton(
                  icon: icon,
                  onPressed: onTapIcon,
                )
              : null,
          border: InputBorder.none,
        ),
      ),
      _handleError(context)
    ],
  )

_handleError 在哪里

Widget _handleError(BuildContext context) {
if (errorText == null) {
  return Container();
}

return Container(
  padding: EdgeInsets.only(left: 16, right: 16),
  child: Text(
    errorText,
    style: Theme.of(context)
        .textTheme
        .caption
        .copyWith(color: Theme.of(context).errorColor),
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
  ),
);

}