How can I adjust the height of textformfield flexibly?

I am trying to design a textformfield, and I set the height to 40 for design.

But when I set the height, the height of textformfield does not increase such as picture.enter image description here

Container(
  height: 40,
  child: Expanded(
    child: TextFormField(
      maxLines: null,
      decoration: const InputDecoration(
        border: InputBorder.none,
        counterText: '',
        hintText: 'enter text',
      ),
    ),
  ),
),

How can I solve it??

If you don’t set a fixed height for the Container, the TextFormField will size itself based on the number of lines.

Container(
  // Remove the height
  color: Colors.amber,
  child: TextFormField(
    maxLines: null,
    decoration: const InputDecoration(
      border: InputBorder.none,
      counterText: '',
      hintText: 'enter text',
    ),
  ),
)

One line

Multiple lines


If you want to set a fixed height for the Container in a way that the TextFormField should respect it, you can try using the expands property:

Container(
  height: 40,
  child: TextFormField(
    // ...
    expands: true,
  ),
)

Make sure the parent widget of the Container allows these constraints.

You can wrap it in a Container and set expand value to true for the TextField. The container will be the size of the default TextField and expand as the child grows.

Container(
   child: TextField(
      minLines: null,
         maxLines: null, // Set this
         expands: true, // Set this
         keyboardType: TextInputType.multiline,
   ),
)

Leave a Comment