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

Question

When i tap in textField in landScape mode i would like to expand in full screen likes whatsapp

Example gif Whats

            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";
                }
              },
            )

Answer 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,                 decoration: InputDecoration.collapsed(hintText: "Enter your text here"),               ),             )           )         ],       )     );   } 

Answer 2

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

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

Answer 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....

Answer 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.