flutterdartflutter-layoutflutter-form-builder

Change the error message position in Flutter


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


Solution

  • 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.