<p dir="auto">The <code class="notranslate">maxLines</code> attribute simply provides with maximum lines pre-generated by the framework, thus increasing the size of <code class="notranslate">TextField</code>.<br>
There should also be an option of <code class="notranslate">minLines</code> where <code class="notranslate">maxLines</code> will act as the maximum lines to which the TextField can EXPAND and then enables the scrolling.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19249966/44542682-2d492200-a72b-11e8-9d94-28e6b8930519.gif"><img src="https://user-images.githubusercontent.com/19249966/44542682-2d492200-a72b-11e8-9d94-28e6b8930519.gif" alt="There is no restriction to maxLines either" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">Or<br>
<code class="notranslate">TextInputType.multiline</code> should set the default <code class="notranslate">maxLines</code> to 1 and then maximum lines can grow till the size defined in the attribute.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19249966/44542876-acd6f100-a72b-11e8-9f55-caefbed0e376.gif"><img src="https://user-images.githubusercontent.com/19249966/44542876-acd6f100-a72b-11e8-9f55-caefbed0e376.gif" alt="third" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">A common UI pattern is having a text field which grows vertically, adding more lines, as you type, up to a certain number of lines, after which the content scrolls.</p>
<p dir="auto">Presently, we can have a growing <code class="notranslate">TextField</code> by making <code class="notranslate">maxLines=null</code>. However, then the <code class="notranslate">TextField</code> never stops growing. Otherwise, if we make, say, <code class="notranslate">maxLines=6</code>, then it will have 6 fixed lines, and will not grow.</p>
<p dir="auto">Unfortunatelly, <code class="notranslate">maxLines</code> was a bad name. That should have been called simply "lines", since it fixes the number of lines, and is not a maximum. However, that cannot be changed anymore.</p>
<p dir="auto">I will now suggest adding another parameter, called <code class="notranslate">maxLineLimit</code>, which lets the number of lines grow until that number and then no more. And while we're at that, I would also add the less important <code class="notranslate">minLineLimit</code>.</p>
<p dir="auto">So, for example, if we make <code class="notranslate">maxLines=null, minLineLimit=2, maxLineLimit=6</code>, then the <code class="notranslate">TextField</code> starts with 2 lines, and, if necessary to fit the text, grows until 6 lines. After that it scrolls.</p>
<p dir="auto">This change is very easy to do, in file <code class="notranslate">editable.dart</code>, the method <code class="notranslate">_preferredHeight</code> in <code class="notranslate">class RenderEditable</code> has these last 2 lines:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    _layoutText(width);
    return math.max(preferredLineHeight, _textPainter.height);"><pre class="notranslate">    <span class="pl-en">_layoutText</span>(width);
    <span class="pl-k">return</span> math.<span class="pl-en">max</span>(preferredLineHeight, _textPainter.height);</pre></div>
<p dir="auto">These could be simply changed to:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="      _layoutText(width);
      return math.min(preferredLineHeight * maxLineLimit, math.max(preferredLineHeight * minLineLimit, _textPainter.height));"><pre class="notranslate">      <span class="pl-en">_layoutText</span>(width);
      <span class="pl-k">return</span> math.<span class="pl-en">min</span>(preferredLineHeight <span class="pl-k">*</span> maxLineLimit, math.<span class="pl-en">max</span>(preferredLineHeight <span class="pl-k">*</span> minLineLimit, _textPainter.height));</pre></div>