更改颤振中的错误消息位置

Question

我必须创建一个需要这么多用户输入的应用程序，这就是为什么我在代码中使用这么多Textfiled来获取用户输入的原因。

Textfiled验证时间--我只需使用全局键列表--它的工作是透明的。，但问题是当用户输入错误时，文本文件显示一个错误消息，即我的Textbox UI可以更改(UI很好地在非常适当的范围内更改)。

请帮助，我能做什么使我的错误信息位置将被更改.

TextFiled代码：

//this is inside the statfull Widget
GlobalKey<FormState> _formkeySubNumber = new GlobalKey();

Widget SubNumber_Input_Box() {
    return Form(
      //for form validation
      key: _formkeySubNumber,

      child: Container(
        margin: EdgeInsets.only(top: 7, left: 6),
        height: 38,
        width: 300,
        decoration: BoxDecoration(
          color: HexColor("#D9D9D9"),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),

        //padding
        child: Padding(
          padding: EdgeInsets.only(left: 12),

          //textfiled
          child: TextFormField(
            //for validation
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Subject Number';
              }
              return null;
            },

            //for storing user input && value in string format so we convert into the int formate
            onChanged: (value) {
              subjectNumber = int.tryParse(value)!;
            },

            //for only number
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(
              hintText: "Enter Minimum-4 to Maximum-8 Subject",
              hintStyle: TextStyle(
                fontFamily: "RobotoSlab",
                fontSize: 14,
              ),

              //for remove underline from input filed
              border: InputBorder.none,
            ),

            //for store only integer value
            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
            ],
          ),
        ),
      ),
    );
  }

和中的一个按钮中的这个调用

                          [Container(
                            margin: EdgeInsets.only(top: 5),
                            child: ElevatedButton(
                              child: Text("Go"),

                              style: ElevatedButton.styleFrom(
                                primary: HexColor("#EE6C4D"),
                                //this colour set (opacity is low) when button is disable
                                onSurface: HexColor("#E0FBFC"),
                              ),

                              //store user value -->subjectNumber
                              onPressed: isGoButtonActive
                                  ? () {
                                      //for Form Validation
                                      if (_formkeySubNumber.currentState!
                                          .validate()) {
                                        //this show the container after prerssed button
                                        showContainer1();
                                      }

                                      setState(() {
                                        // //this is for store subjectnumber value from user input
                                        // subjectNumber =
                                        //     subNumber_Controller.text;
                                        // print("Subject Number Is : $subjectNumber");
                                      });
                                    }
                                  : null,
                            ),
                          ),]

​

​

Answer 1

您已经在具有特定高度的textfield周围创建了一个容器。对于文本字段的样式，可以使用

TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      filled: true,
      hintStyle: TextStyle(color: Colors.grey),
      hintText: "Type in your text",
      fillColor: Colors.white),
)

这样，错误消息就会出现在textfield下面和白色区域之外。

Answer 2

您可以从Form> Container中移除高度。它将根据错误状态给出灵活的高度。

  Widget SubNumber_Input_Box() {
    return Form(
      key: _formkeySubNumber,
      child: Container(
        width: 300,
        color: HexColor("#D9D9D9"),
        //padding
        child: Padding(
          padding: EdgeInsets.only(left: 12),
          child: TextFormField(
            autovalidateMode: AutovalidateMode.onUserInteraction, // you might like this as well

另外，我建议你看看OutlineInputBorder

Widget SubNumber_Input_Box() {
  return Form(
    key: _formkeySubNumber,
    child: Padding(
      padding: EdgeInsets.only(left: 12),
      child: TextFormField(
        autovalidateMode: AutovalidateMode.onUserInteraction,
        //for validation
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please Enter Subject Number';
          }
          return null;
        },

        //for storing user input && value in string format so we convert into the int formate
        onChanged: (value) {
          subjectNumber = int.tryParse(value)!;
        },

        //for only number
        keyboardType: TextInputType.number,

        decoration: const InputDecoration(
          hintText: "Enter Minimum-4 to Maximum-8 Subject",
          hintStyle: TextStyle(
            fontFamily: "RobotoSlab",
            fontSize: 14,
          ),
          enabledBorder: OutlineInputBorder(),
          errorBorder: OutlineInputBorder(),
          focusedBorder: OutlineInputBorder(),
          border: OutlineInputBorder(),
        ),

        //for store only integer value
        inputFormatters: <TextInputFormatter>[
          FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
        ],
      ),
    ),
  );
}