Flutter中的文本表單欄位內顯示錯誤訊息

我已經實作了一個帶有驗證的文本表單欄位，它回傳錯誤訊息，但它顯示在文本表單欄位中。有沒有辦法在文本表單欄位之外顯示它？

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

現在怎么樣了——

我希望它看起來如何-

uj5u.com熱心網友回復：

洗掉父小部件Container并添加如下示例decoration的屬性！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)),
  ),

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

標籤：扑 验证 文本表单域 错误消息

上一篇：如何讀取兩個物件之間沒有任何分隔的日志檔案？

下一篇：獲取api/react后的表單驗證