Change the error message position in Flutter

Question

I have to make one application which take so many user input, that's why i use so many Textfiled in my code for taking user input.

An Textfiled validation time I simply use List of Global keys and it's work perfactly. But problem is when user give wrong input then textfiled show an error message that time my Textbox UI can change (UI well change in very appropriately).

Pleas help, what can i do so my error message postion will be changed.

TextFiled code:

//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]')),
            ],
          ),
        ),
      ),
    );
  }

And this call inside the one Button Like that

                          [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

You can remove the height from Form > Container . And it will give you flexible height based on error state.

  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

Also I will suggest to look at 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]')),
        ],
      ),
    ),
  );
}

Answer 2

You have created a container around the textfield with specific height. For styling a textfield you can use

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

This way the error message appears below the textfield and outside the white area.