Home » Android » android – Flutter increase height of TextFormField

android – Flutter increase height of TextFormField

Posted by: admin June 15, 2020 Leave a comment

Questions:

I am creating a Flutter app. i made the design like this.
enter image description here

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

final email = TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    initialValue: '[email protected]', 
    style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
    decoration: InputDecoration(
      hintText: 'Email', 
      contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(32.0)
      ),
    ),
  );

Whats the syntax for the height in text form field.

How to&Answers:

Just adjust the contentPadding in InputDecoration.

enter image description here

final email = TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    initialValue: '[email protected]',
    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:

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:

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:

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