Flutter 中的文本表单字段内显示错误消息

Question

我已经实现了一个带有验证的文本表单字段，它返回错误消息，但它显示在文本表单字段内。有没有办法将其显示在文本表单字段之外？

Container(
                                  alignment: Alignment.center,
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 20),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.withOpacity(0.1),
                                      borderRadius: const BorderRadius.all(
                                          Radius.circular(10))),
                                  child: TextFormField(
                                    autovalidateMode:
                                        AutovalidateMode.onUserInteraction,
                                    controller: _controller,
                                    validator: validatePhone,
                                    textAlignVertical: TextAlignVertical.center,
                                    style: const TextStyle(
                                        color: primaryText,
                                        fontFamily: 'InterMedium',
                                        fontSize: 15),
                                    decoration: const InputDecoration(
                                      counterText: '',
                                      errorStyle: TextStyle(
                                        fontFamily: 'InterMedium',
                                      ),
                                      prefixIcon: Padding(
                                        padding: EdgeInsets.only(
                                            left: 20, right: 15),
                                        child: Icon(
                                          Icons.phone_android_rounded,
                                          color: secondaryText,
                                        ),
                                      ),
                                      hintText: 'Enter mobile number',
                                      hintStyle: TextStyle(
                                        fontFamily: 'InterMedium',
                                        color: secondaryText,
                                      ),
                                      border: InputBorder.none,
                                    ),
                                    cursorColor: secondaryColor,
                                    maxLines: 1,
                                    maxLength: 10,
                                    keyboardType: TextInputType.phone,
                                    textInputAction: TextInputAction.done,
                                  ),
                                ),

现在怎么样 -

我希望它看起来像这样 -

Answer 1

删除父小部件 Container 并添加 TextFormField 的 decoration 属性，如下例所示！

TextFormField(
      autovalidateMode: AutovalidateMode.onUserInteraction,
        cursorColor: Colors.black,
        validator: validator,
        controller: controller,
        keyboardType: TextInputType.phone,
        style: const TextStyle(fontSize: 16, color: Colors.black, fontFamily: 'Helvetica', fontWeight: FontWeight.normal),
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xff13367A)),
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xff13367A)),
            ),
            border: UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xff13367A)),
            ),
            hintText: hint)),
  ),

PS：-如果您想在 TextFormField 中添加灰色，那么您可以使用 　装饰：InputDecoration(fillColor: Colors.grey,filled: true)！

Answer 2

只需删除容器并使用 TextFormField 装饰属性来提供半径、颜色等，如下所示：

  TextFormField(
                controller: _confirmpassword,
                obscureText: !_isPasswordVisible,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(14),
                    borderSide:
                        const BorderSide(color: AppColor.bordercolor),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(14),
                    borderSide:
                        const BorderSide(color: AppColor.focusbordercolor),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(14),
                    borderSide:
                        const BorderSide(color: AppColor.bordercolor),
                  ),
                  fillColor: AppColor.textfieldcolor,
                  filled: true,
                  suffixIcon: IconButton(
                    icon: Icon(
                      _isPasswordVisible
                          ? Icons.visibility
                          : Icons.visibility_off,
                    ),
                    onPressed: () {
                      setState(() {
                        _isPasswordVisible = !_isPasswordVisible;
                      });
                    },
                  ),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your confirm password';
                  } else if (_newpassword.text.toString() !=
                      _confirmpassword.text.toString()) {
                    return 'Password did not match!';
                  }
                  return null;
                },
              ),

结果：