61

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.

Improve this question
2
  • 1
    you can use SizedBox property for change the width and height Commented May 25, 2018 at 6:52
  • If you want to add multiple lines, use maxLines: 5 Commented Jan 15, 2020 at 12:59

13 Answers 13

Reset to default
90

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: const EdgeInsets.symmetric(vertical: 25.0, horizontal: 10.0), border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)), ), );
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I want to decrease its height to smaller than its default height but it doesn't work. Why?
How can we make content padding to be at center in inputtextform field?
@Sokheang Khun i use negative values to decrease the padding, but not sure if this is a practical way to do this
@SokheangKhun have you found any answer to this?
Yes, I follwed @Ajay Kumar's answer
34

enter image description here

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)), ), ), ),
Improve this answer

2 Comments

Anybody knows what is isDense for
isDence is whether the [InputDecorator.child] is part of a dense form (i.e., uses less vertical space). according to flutter documention
24

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, )
Improve this answer

2 Comments

Your answer is unclear. Please provide a description for your code.
Hey @Momoro you can use this code if you don't want to pass a static height to your TextFormField if minLines is 1 and maxlines is 2 then a single line TextFormField will be visible and its height will be increased dynamically while user writes more words in the field .Its height will be increased up to 2 lines because maxLines =2 if you initially want to show a bigger TextFormField then increase minLines . if you are still not clear please let me know
14

Set the expands attribute on TextFormField to be true then put TextFormField into a SizedBox with a height

SizedBox( height: 40.0, child: TextFormField( keyboardType: TextInputType.emailAddress, autofocus: false, expands: true, // Setting this attribute to true does the trick initialValue: '[email protected]', style: 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) ), ), ), )
Improve this answer

1 Comment

It will work until you give it an error
7

Screenshot:

enter image description here

Code:

You need to use a SizedBox and TextField.maxLines property.

@override Widget build(BuildContext context) { final height = 100.0; return Scaffold( body: SizedBox( // <--- SizedBox height: height, child: TextField( cursorColor: Colors.red, maxLines: height ~/ 20, // <--- maxLines decoration: InputDecoration( filled: true, hintText: 'Hint text', fillColor: Colors.grey, ), ), ), ); }
Improve this answer

Comments

6

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!')), )
Improve this answer

4 Comments

The const Cart(...) should be new TextFormField(...), right?
You can replace Card child with your TextFormField instead of Text('Hello World!'). Shown in answer.
use double.infinity at width value to get dynamic width :)
It didnot work, Can we give height to text fields by another way?
5

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` ... ),
Improve this answer

2 Comments

I have also created a Flutter Issue for this. It's the #52634
this solution worked great for me and I can now hide the error text, but unfortunately the borders are not colored red anymore when a validation error occurs. Is there a way to add that?
4

If anyone's searching for a different solution to change its height, besides changing the Theme. You can use the decoration's constraints parameter:

decoration: const InputDecoration( constraints: BoxConstraints(maxHeight: 50, minHeight: 50), labelText: "Your Label")
Improve this answer

1 Comment

This actually messes with your hint text. If you give less height then the hint text does not stay in center & disturbs the UI.
3

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

Improve this answer

1 Comment

This is the only way I found for reducing the default height. The question is about increasing the height. Anyway, to reduce the default size, you also have to consider validation errors and increase the height if validation returns error string. E.g.: Container(height: validator == null ? 40 : 62, width: double.infinity, child: TextFormField(...).
1

There are a couple of different methods to do this. TextFormField does not have a height attribute, and the error handling and labels all inter-relate, which make behavior complicated depending on the behavior you prefer.

First, the basic way to do this is to have a parent set the size, and set your TextFormField to expand:

SizedBox( height: 50, child: TextFormField( expands: true, maxLines: null, minLines: null, ), ),

Caveats to this: You can't limit lines on the form to 1. This can be a problem if you want to list a high character count field, and you don't want it to wrap.

In that case, here is a solution to manually set the height using the Text to drive it:

TextFormField( decoration: InputDecoration( labelStyle: TextStyle( fontSize: 16, ), ), style: TextStyle( height: 2.5, textBaseline: TextBaseline.ideographic, overflow: TextOverFlow.ellipsis, fontSize: 12, ), ),

The height is a multiple of the font size. This is still wonky, however it allows you to expand the height without affecting the label of the field (as long as you set a label fontSize, otherwise the label will be the same as the font size you set for the main style).

The label is a key consideration. If you try to set the height of the TextFormField using content padding (a common answer from other users), your label is affected by that padding, which isn't ideal for most cases. This is the padding solution:

TextFormField( decoration: InputDecoration( contentPadding: const EdgeInsets.symmetric(vertical: 30.0), ), )

But this solution would bump your labels down with the contents. It does, however, work, and is a valid solution, just unacceptable in most cases.

Improve this answer

Comments

0

Use a TextField or a TextFormField, add this parameters, maxLines. See code below:

final inputBorder = OutlineInputBorder(borderSide: Divider.createBorderSide(context)); TextFormField( controller: _myController, keyboardType: TextInputType.text, decoration: InputDecoration( constraints: const BoxConstraints.expand( height: 300, width: 400 ), hintText: 'What is Your Question?', border: inputBorder, focusedBorder: inputBorder, enabledBorder: inputBorder, filled: true, contentPadding: const EdgeInsets.all(8), ), maxLength: 250, maxLines: 50, ),
Improve this answer

Comments

-1 
 Expanded( child: TextFormField( controller: emailAddressController, obscureText: false, decoration: InputDecoration( labelText: 'Email Address', labelStyle: TextStyle( fontFamily: 'Lexend Deca', color: Color(0xFF95A1AC), fontSize: 14, fontWeight: FontWeight.normal, ), hintText: ' Enter your email here ...', hintStyle: TextStyle( fontFamily: 'Lexend Deca ', color: Color(0xFF95A1AC), fontSize: 14, fontWeight: FontWeight.normal, ), enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Color(0xFFDBE2E7), width: 2, ), borderRadius: BorderRadius.circular(8), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: Color(0xFFDBE2E7), width: 2, ), borderRadius: BorderRadius.circular(8), ), filled: true, fillColor: Colors.white, contentPadding: EdgeInsetsDirectional.fromSTEB( 10, 10, 0, 10), ), style: TextStyle( fontFamily: ' Lexend Deca', color: Color(0xFF2B343A), fontSize: 14, fontWeight: FontWeight.normal, ), ), )
Improve this answer

Comments

-1 
SizedBox( height: 50, child: TextFormField( InputDecoration( isDense: false, filled: true, ) ), ),
Improve this answer

1 Comment

Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.