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

Question

我已经实现了一个带验证的文本表单域，它 returns 错误消息但它显示在文本表单域中。有没有办法在文本表单域之外显示它？

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 并添加 decoration 属性 of TextFormField 如下例！

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)),
  ),

P.S :- 如果您想在 TextFormField 中添加灰色，那么您可以使用 decoration: InputDecoration(fillColor: Colors.grey, filled: true) !