Flutter textfield that auto expands when text is entered and then starts scrolling the text when a certain height is reached

Question

I've tried many configurations of the Flutter TextField but can't figure out how to build this one.

I'm looking for a textfield that is a single line initially and it auto expands as the text is entered into it and then at some point begins scrolling itself.

This can be achieved partially by using the maxLines: null attribute. But then when a lot of text is entered the Text in the textfield itself overflows.

And if the maxLines is set to a value then the whole textfield itself gets expanded to those many lines to start off with rather than beginning with a single line.

Is there a way to limit the height of textfield at some point like done in many chat apps like WhatsApp and telegram.

Günter Zöchbauer · Accepted Answer · 2020-06-21T13:58:50.323

Container(
    child: new ConstrainedBox(
        constraints: BoxConstraints(
            maxHeight: 300.0,
        ),
        child: TextField(
                    maxLines: null,
                ),
            ),
        ),
    ),
)

In older Flutter versions it was

Container(
    child: new ConstrainedBox(
        constraints: BoxConstraints(
            maxHeight: 300.0,
        ),
        child: new Scrollbar(
            child: new SingleChildScrollView(
                scrollDirection: Axis.vertical,
                reverse: true,
                child: new TextField(
                    maxLines: null,
                ),
            ),
        ),
    ),
)

I think this answer should be edited to refer to the new way of using minLines and maxLines as proposed by @flomaster. — Pierre Massé, Apr 04 '23 at 20:30

score 47 · Answer 2 · answered Aug 23 '19 at 17:53

47

Now we actually have minLines parameter of TextField, no workaround needed anymore.

TextField(
    minLines: 1,
    maxLines: 5,
)

answered Aug 23 '19 at 17:53

flomaster

1,563
16
16

this should be accepted answer works well in all situations even if the direct child of the constrained box is not a text field. The accepted answer can cause some problems if direct child is not a text field. – tensor Jun 29 '20 at 07:24
This works, but it does not show a scrollbar on the text field when it is scrolled, which can be confusing. – Luke Hutchison Mar 11 '23 at 05:19
Another "gotcha" is if the user has their font size preferences to a large font, you might cause an overflow. The lines are based on font size no? – IcyIcicle Jun 08 '23 at 00:05

Bobby Stenly · Answer 3 · 2019-01-16T11:41:50.923

The accepted answer by Gunter is good enough if you don't have any style for the TextField. But if you have at least an underline / bottom border for the TextField, it will disappear when scroll up.

My recommendation is to calculating the lines with TextPainter, then apply the calculated number of lines to TextField. Here's the code, replace your current TextField with LayoutBuilder :

LayoutBuilder(
    builder: (context, size){
      TextSpan text = new TextSpan(
        text: yourTextController.text,
        style: yourTextStyle,
      );

      TextPainter tp = new TextPainter(
          text: text,
          textDirection: TextDirection.ltr,
          textAlign: TextAlign.left,
      );
      tp.layout(maxWidth: size.maxWidth);

      int lines = (tp.size.height / tp.preferredLineHeight).ceil();
      int maxLines = 10;

      return TextField(
        controller: yourTextController,
        maxLines: lines < maxLines ? null : maxLines,
        style: yourTextStyle,
      );
    }
  )

Great implementation! I think this is the correct answer! Thanks! — alfreedom, Jan 22 '19 at 14:40

score 2 · Answer 4 · edited Apr 30 '22 at 04:53

2

TextField(
     minLines: 1,
     maxLines: 5,
     maxLengthEnforced: true,
),

edited Apr 30 '22 at 04:53

Ravindra S. Patil

11,757
3
13
40

answered Jun 17 '20 at 10:58

Bijoya_Banik

387
4
12

Flutter textfield that auto expands when text is entered and then starts scrolling the text when a certain height is reached

4 Answers4

Linked