How To Expand A Textfield In Flutter Looks Like A Text Area

When i tap in textField in landScape mode i would like to expand in full screen likes whatsapp Example gif Whats TextFormField( keyboardType: TextInputTyp

Solution 1:

All you need to do is set the maxLines variable when creating a TextField. I have added the text field inside a Card widget so you can see the total area.

@override
  Widget build(BuildContext context) {
    returnScaffold(
      appBar: AppBar(
        title: Text("Simple Material App"),
      ),
      body: Column(
        children: <Widget>[
          Card(
            color: Colors.grey,
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: TextField(
                maxLines: 8,
                decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
              ),
            )
          )
        ],
      )
    );
  }

Solution 2:

Set maxLines to null and keyboardType to TextInputType.multiline like this:

TextField(maxLines:null,keyboardType:TextInputType.multiline,)

Solution 3:

To achieve the exact look of the text area you can use this

TextFormField(
   minLines: 6, // any number you need (It works as the rows for the textarea)keyboardType: TextInputType.multiline,
   maxLines: null,
)

Here is the output (Some extra styling will needed)

Enjoy....

Solution 4:

Unfortunately, there is no way in flutter you can set the minimum height of a TextField or TextFormField. The best way to give a TextField or a TextFormField a fixed size is to specify the maximum lines the Field should take without expanding farther. Note: This does not limit the amount of input text, it only limits the number of lines shown.

Example:

TextFormField(keyboardType:TextInputType.multiline,maxLines:8,maxLength:1000,),

This will limit the size of the field to 8 lines, but can take as much as 1000 characters. Hope this will help someone.

Solution 5:

Set expands: true

TextField(maxLines:null,expands:true,keyboardType:TextInputType.multiline,)

OR

If you're using it inside a Column, then use:

Expanded(
  child: TextField(
    maxLines: null,
    expands: true,
  ),
)