59

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

enter image description here

            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";
                }
              },
            )
2
  • please show your code Mar 3, 2019 at 19:46
  • you can try setting the keyboardType: TextInputType.multiline when the textfield is in focus and the orientation is landscape Mar 3, 2019 at 22:20

9 Answers 9

83

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

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

TextField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
) 
2
  • Great solution! How can we achieve sentenceCapitalization while still using multiline? Jul 3, 2020 at 16:53
  • For future seekers: set textCapitalization: TextCapitalization.sentences in the TextField
    – Raqha
    Mar 23 at 21:57
36

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) enter image description here

Enjoy....

15

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.

3
  • That's not totally right I think. hintText with '\n' will expand the TextField's height. See my answer below.
    – JChen___
    Oct 28, 2021 at 7:51
  • @JChen___ 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? Oct 29, 2021 at 7:30
  • Yes it disappears, but the expanded height keeps.
    – JChen___
    Nov 1, 2021 at 7:42
12

Screenshot:

enter image description here

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),
)
0
3

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

Without focus. Without focus

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

enter image description here

0

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

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

0

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,
) 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.