Flutter increase height of TextFormField

Question

I am creating a Flutter app. i made the design like this.

My TextFormField form field for email and password heights are small. I want it to be the same size of the bu

Answer 1

Just adjust the contentPadding in InputDecoration.

final email = TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    initialValue: 'sathyabaman@gmail.com',
    style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
    decoration: InputDecoration(
      hintText: 'Email',
      contentPadding: new EdgeInsets.symmetric(vertical: 25.0, horizontal: 10.0),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
    ),
  );

Answer 2

You can change the height by changing the minLines value just try this

               TextFormField(
                           keyboardType: TextInputType.multiline,
                           controller: _opTextController,
                           decoration: InputDecoration(
                               isDense: true,
                             border: OutlineInputBorder(
                               borderSide: BorderSide(color: Colors.black)
                             )

                           ),
                           maxLines: 5,
                           minLines: 3,
                           // controller: cpfcontroller,
                         )

Answer 3

You can user this code to customized your TextFormField

new SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(child: const Text('Hello World!')),
)

Answer 4

There's another alternative to adding extra, permanent padding to cover the errorText — which would probably mess up many designer's original project.

You could create a modified version of the source's TextFormField.

To achieve just that, you can:

1. Copy-paste all of the content in the source's TextFormField.
2. Rename your custom TextFormField just so you avoid naming conflicts with the original.
   • You should probably also rename the internal state class.
   • In VS Code, you can use Ctrl + H to replace TextFormField for, say, TextFormFieldWithErrorTextOption.
3. Add another parameter to the TextFormField's constructor (below this line), say, errorTextPresent:

   // `true` is the current implicit default, i.e., showing the `errorText`
   bool errorTextPresent = true 
   

4. Change the decoration's initialization for the internal TextField:
   1. From:

      decoration: effectiveDecoration.copyWith(field.errorText)
      

   2. To:

      decoration: effectiveDecoration.copyWith(
          errorText: errorTextPresent ? field.errorText : null)
      

5. Then, you can use your new TextFormField similarly to how you use any TextFormField:

   TextFormFieldWithErrorTextOption(
     errorTextPresent: false, // `false` will disable the `errorText`
     ...
   ),
   

Answer 5

Use these two lines to control TextFormField Height inside InputDecoration .

isDense: true, 
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),

Full example

Material(
                elevation: 4,
                shadowColor: Colors.blue,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                child: Padding(
                  padding: const EdgeInsets.only(left: 12),
                  child: TextFormField(
                    controller: searchProvider.searchController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                        hintText: 'hintText',
                        isDense: true, // important line
                        contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),// control your hints text size
                        hintStyle: TextStyle(letterSpacing: 2, color: Colors.black54, fontWeight: FontWeight.bold),
                        fillColor:  Colors.white30 ,
                        filled: true,
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none)),
                  ),
                ),
              ),

Answer 6

just add a Container. Adjust the height of the Container as per Your requirement and make textformfield the child of the container.