How to set height of TextFormfield in flutter?

Question

First, Recently I have started to building desktop app with dart code. just built some screens and which are responsible for mobile and web too, for that used LayoutBuilder but going wrong with when trying to set the height according to mine, for that I wrapped TextformField with Container and gave height.

when I put validation on TextformField onClick of login button then something goes wrong with the height of TextformField.

Look at the Screenshot: before of click the login button:

When I click the login button without inputting any value for checking validation:

Piece of code of TextformField :

Widget _buildEmailTextField() {
   return Container(
     height: 35,
     child: Theme(
       data: new ThemeData(
         primaryColor: Color(0xFF262C48),
         primaryColorDark: Color(0xFF262C48),
       ),
       child: TextFormField(
         keyboardType: TextInputType.emailAddress,
         validator: (val){
           bool emailValid = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
           .hasMatch(val);
           if(!emailValid){
           return 'Invalid Email Address';
           }else{
             return null;
           }
         },
         controller: emailController,
         readOnly: isLoading?true:false,
         decoration: InputDecoration(
           fillColor:  Color(0xFFd9d8d8),
           filled: true,
           
           border: new OutlineInputBorder(
             borderRadius: const BorderRadius.all(
               const Radius.circular(7.0),
             ),
             borderSide: BorderSide(color:Color(0xFF262C48),width: 2.0)
           ),
           contentPadding: EdgeInsets.only(left: 10),
           // prefixIcon: Icon(
           //   Icons.email,
           //   color: Color(0xFF008577),
           // ),
           hintText: 'Email',
           
         ),
       ),
     ),
   );
 }

Answer 1

Please check it out,

Widget _buildEmailTextField()) {
    return Container(
        height: 35,
        child: Theme(
          data: new ThemeData(
            primaryColor: Color(0xFF262C48),
            primaryColorDark: Color(0xFF262C48),
          ),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                SizedBox(
                  height: 20,
                ),
                Container(
                  child: TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    validator: (val) {
                      bool emailValid = RegExp(
                              r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                          .hasMatch(val);
                      if (!emailValid) {
                        return 'Invalid Email Address';
                      } else {
                        return null;
                      }
                    },
                    controller: emailController,
                    readOnly: isLoading ? true : false,
                    decoration: InputDecoration(
                      fillColor: Color(0xFFd9d8d8),
                      filled: true,

                      border: new OutlineInputBorder(
                          borderRadius: const BorderRadius.all(
                            const Radius.circular(7.0),
                          ),
                          borderSide:
                              BorderSide(color: Color(0xFF262C48), width: 2.0)),
                      contentPadding: new EdgeInsets.symmetric(
                          vertical: 25.0, horizontal: 10.0),
                      // prefixIcon: Icon(
                      //   Icons.email,
                      //   color: Color(0xFF008577),
                      // ),
                      hintText: 'Email',
                    ),
                  ),
                ),
                
                RaisedButton(
                  onPressed: () {
                    // Validate returns true if the form is valid, otherwise false.
                    if (_formKey.currentState.validate()) {
                      // If the form is valid, display a snackbar. In the real world,
                      // you'd often call a server or save the information in a database.

                      Scaffold.of(context).showSnackBar(
                          SnackBar(content: Text('Processing Data')));
                    }
                  },
                  child: Text('Submit'),
                )
              ],
            ),
          ),
        ),
      );
  }

Answer 2

TextFormField inherits size from child. One of solution is to set contentPadding in InputDecoration. You already use this to pad left side. You can do modification like below:

contentPadding: EdgeInsets.only(left: 10.0, top: 15.0, bottom: 15.0),