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

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

Lothair

please show your code – Telemeter

you can try setting the keyboardType: TextInputType.multiline when the textfield is in focus and the orientation is landscape – Patisserie

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

Heartless

Answer 2

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

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

Nur

Great solution! How can we achieve sentenceCapitalization while still using multiline? – Plan

For future seekers: set textCapitalization: TextCapitalization.sentences in the TextField – Rathbun

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

Nannette

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.

Czardom

That's not totally right I think. hintText with '\n' will expand the TextField's height. See my answer below. – Footbridge

@Footbridge What do you mean is not right, you mean adding a lot of line feeds (\n) to a hint text is the best solution. Don't you know that as soon as you start typing the hint text disappears? – Czardom

Yes it disappears, but the expanded height keeps. – Footbridge

Answer 5

Screenshot:

Set minLines to a non-null value and maxLines to null (explicitly). Set TextCapitalization.sentences if you want to make the next character uppercase after a period.

TextField(
  minLines: 3,
  maxLines: null,
  keyboardType: TextInputType.multiline,
  textCapitalization: TextCapitalization.sentences,
  decoration: InputDecoration(filled: true),
)

Permeable

Answer 6

TextFormField(
          minLines: 6,
          maxLines: null,
          keyboardType: TextInputType.multiline,
          decoration: InputDecoration(
          alignLabelWithHint: true,
          border: OutlineInputBorder(),
          labelText: 'Enter text',
        ),
      ),

Taps

Answer 7

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.

Footbridge

Answer 8

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

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

Gangster

Answer 9

This is a better solution for the text area If you have multiple textarea in your UI then you have to specify maxlines in them. Use this code to create a common component and it will expend according to content

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

Marion

Answer 10

 SizedBox(
                          height: 200,
                          child: TextFormField(
                            **maxLines: null,**  //use this and create parfect address box
                            **maxLength: 300,**//use and wight fix text on your textformfiled or textfiled
                            textAlignVertical:
                                TextAlignVertical.top, // Aligns text to the top
                            decoration: InputDecoration(
                              hintText: "Address",
                              alignLabelWithHint:
                                  true, // Aligns the hint text to the top
                              contentPadding: const EdgeInsets.fromLTRB(
                                  20.0, 20.0, 30.0, 70.0),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                              ),
                              enabledBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color:
                                      const Color.fromARGB(255, 204, 204, 204),
                                ),
                                borderRadius: BorderRadius.circular(8),
                              ),
                            ),
                          ),
                        ),

Hylo