'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

            TextFormField(
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                  prefixIcon: Padding(
                    padding: EdgeInsets.all(0.0),
                    child: Icon(Icons.person,
                        size: 40.0, color: Colors.white),
                  ),
                  hintText: "Input your opinion",
                  hintStyle: TextStyle(color: Colors.white30),
                  border: OutlineInputBorder(
                      borderRadius:
                      BorderRadius.all(new Radius.circular(25.0))),
                  labelStyle: TextStyle(color: Colors.white)),
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 25.0,
              ),
              controller: host,
              validator: (value) {
                if (value.isEmpty) {
                  return "Empty value";
                }
              },
            )

Solution 1:^[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) {
    return Scaffold(
      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, //or null 
                decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
              ),
            )
          )
        ],
      )
    );
  }

Solution 2:^[2]

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

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

Solution 3:^[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:^[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:^[5]

Set expands: true

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

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

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

Solution 6:^[6]

Set maxLines to null and set keyboardType to TextInputType.multiline will make TextField's height to grow up with your input.

And hintText with '\n' may expand the TextField's height at the start.

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
  decoration: InputDecoration(
      labelText: '??',
      hintText: '??????????\n\n\n\n\n'),

),

Here is the output.

With focus.

Without focus.

Solution 7:^[7]

If your textField widget is Column's child widget and set expands: true .

Can set textAlignVertical: TextAlignVertical.top to align text in the top.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	AnasSafi
Solution 3
Solution 4	Francisca Mkina
Solution 5	CopsOnRoad
Solution 6
Solution 7

'How to expand a textField in flutter looks like a text Area

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]