Fix TextField height issues #27205

justinmc · 2019-01-28T23:12:18Z

There have been several issues where people were unable to accomplish certain simple TextField behaviors without complicated workarounds. This PR is a work in progress attempt at coming up with a minimal API addition that will satisfy these needs for TextField.

Goals:

Preserve existing maxLines behavior. We will not make any non-backwards-compatible changes.
Provide a way to configure a textfield so that its height will grow as text is entered, until it reaches maxLines. The textfield would similarly shrink as text is deleted.

Issues: TextField is missing a real maxLines. #19105, TextField starts with maxLines if it is set to anything other than null. #15388

Provide a way to start expansion at a minimum number of lines.

Issues: TextField-> maxLines should be backed with minLines #20957

Provide a way to specify that a textfield's height should expand to fill the space allocated by its parent.

Issues: Height constrained expandable TextField's border pushed out of parent container #26343 Allow multiline TextField to expand vertically to fit container #21943 TextField maxLines = null should occupy all the area available to it #18825

Proposal

In addition to maxLines, add two new parameters that affect height:

int minLines
bool expands

minLines allows the developer to specify a minimum to start from as the content causes the input to grow. expands tells the input that it can size itself based on its parent if wrapped in an Expanded or Flex.

Examples

Goals 2 and 3: Height growth in a range of lines, including unlimited height with maxLines: null.

TextField(
  minLines: 2,
  maxLines: 4,
)

Goal 4: Size based on parent.

Expanded(
  child: TextField(
    expands: true,
    maxLines: null,
  ),
)

Reference: Behavior Matrix

Current Behavior

None
- Single line
maxLines explicitly null
- 1 line with no content, grows infinitely
maxLines: 1 (default)
- Single line
maxLines: n
- n lines, then scrolls
Wrapping in Expanded has no effect.

Proposed Behavior

All current behavior above
minLines: 1 or null
- Single line
minLines: n
- Error because maxLines is 1 and minLines can't be greater than maxLines
minLines: n, maxLines: explicitly null
- n lines, scrolls when content is longer
expands: true with Expanded parent
- Error because maxLines is 1, which prevents expansion.
maxLines: 1, minLines: 1
- Single line
maxLines: n, minLines: m
- Grows between n and m, including infinitely if n is null
- New behavior
minLines: n
- Error because maxLines is 1 and minLines can't be greater than maxLines
maxLines: null, expands: true wrapped in Expanded
- Height matches parent.
- New behavior

…-max-length

tuliomagalhaes · 2019-01-29T01:17:38Z

Your solution is perfect and solves a lot of open issues. One of my doubt is to close or not my PR. And if you need any kind of help, I'm open to work with you in your repo.

Thank you for your attention!

QoLTech · 2019-01-29T05:20:43Z

This would be great, thanks!

Will-W · 2019-01-29T08:49:03Z

This proposal looks like it fixes all my Text Field layout issues, thanks.

justinmc · 2019-01-29T18:19:42Z

Thanks for the feedback! I'll move forward with this.

@TulioH I'm going to see if I can rebase this PR off of your PR. That way I'll get a good starting point for the expands flag, and you should get credit for contributing. If that works then I'll close your PR.

googlebot · 2019-01-29T18:31:55Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of all the commit author(s), set the cla label to yes (if enabled on your project), and then merge this pull request when appropriate.

justinmc · 2019-01-29T18:34:43Z

Alright @TulioH I was able to bring in your commits. I renamed maxLinesIncrementalHeight to expands and will continue adding the functionality according to my proposal from there.

If that sounds good to you, let me know (see the CLA bot comment above) and I'll close your old PR.

tuliomagalhaes · 2019-01-29T18:46:12Z

For me it's ok! Thanks again!

googlebot · 2019-01-29T19:00:34Z

A Googler has manually verified that the CLAs look good.

(Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.)

googlebot · 2019-01-29T19:53:24Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of all the commit author(s), set the cla label to yes (if enabled on your project), and then merge this pull request when appropriate.

…th flake is reproducible 50% of the time on my machine.

HansMuller

LGTM

tvolkert · 2019-03-09T08:29:29Z

Unfortunately, this was identified as the culprit of some test failures when rolling this into Google. e.g.:

I'm gonna revert, and we can re-apply with a fix.

This reverts commit 9e9f48d.

zaidkazi · 2021-04-09T18:16:50Z

#80133 Still dont understand how to stop the textfield from scrolling vertically when min and max and the user goes over that range

vqthanh1412489 · 2021-09-16T08:27:30Z

Expanded(
  child: TextField(
    expands: true,
    maxLines: null,
  ),
)

NOT work for password field. If turn on key obscureText: true

justinmc · 2021-09-22T21:48:27Z

Can you file a new issue if this isn't working for you? Mention me on it and I'd be happy to take a look.

tuliomagalhaes added 5 commits January 23, 2019 08:17

Create new TextField attribute to control maxLength behaviour

82831c4

Merge branch 'master' of github.com:flutter/flutter into incremenetal…

395ef7c

…-max-length

Create test case for maxLinesIncrementalHeight

91bbbdd

fix maxLinesIncrementalHeight set method

0951d8e

fix editable_test.dart

210a3ce

googlebot added the cla: yes label Jan 28, 2019

justinmc self-assigned this Jan 28, 2019

zoechi added a: text input Entering text in a text field or keyboard related problems framework flutter/packages/flutter repository. See also f: labels. labels Jan 29, 2019

Just introducing some proposed API additions, renaming to expands

ed78bc7

justinmc force-pushed the text-field-height branch from 60eb45c to ed78bc7 Compare January 29, 2019 18:31

googlebot added cla: no and removed cla: yes labels Jan 29, 2019

justinmc added cla: yes and removed cla: no labels Jan 29, 2019

Merge branch 'master' into text-field-height

4680526

justinmc force-pushed the text-field-height branch 5 times, most recently from c41c2d3 to 6ba4dc4 Compare March 7, 2019 19:16

Fix rounding errors showing up in mac tests

7305839

justinmc force-pushed the text-field-height branch 2 times, most recently from fb1c04b to 7305839 Compare March 8, 2019 16:13

justinmc added 2 commits March 8, 2019 08:33

Fix flake by reordering tests. Without this, the dreaded intrinsicwid…

1cb3b4e

…th flake is reproducible 50% of the time on my machine.

Fix more rounding error mac tests

56d0a1b

HansMuller approved these changes Mar 8, 2019

View reviewed changes

justinmc merged commit 9e9f48d into flutter:master Mar 8, 2019

justinmc deleted the text-field-height branch March 8, 2019 20:22

tvolkert added a commit that referenced this pull request Mar 9, 2019

Revert "Fix TextField height issues (#27205)"

bcbc175

This reverts commit 9e9f48d.

tvolkert mentioned this pull request Mar 9, 2019

Revert "Fix TextField height issues" #29093

Merged

tvolkert added a commit that referenced this pull request Mar 9, 2019

Revert "Fix TextField height issues (#27205)" (#29093)

f21497e

This reverts commit 9e9f48d.

justinmc mentioned this pull request Mar 12, 2019

Text field height attempt 2 #29250

Merged

rmtmckenzie mentioned this pull request Mar 25, 2019

Textfield text is centered vertically when expands = true and using an OutlineInputBorder #29927

Closed

justinmc mentioned this pull request Apr 15, 2019

Text field scroll physics #31088

Merged

justinmc mentioned this pull request May 17, 2019

I upgraded to flutter 1.5 and TextFormField Changes behaviour #32576

Closed

marcglasberg mentioned this pull request Jun 25, 2019

TextField maxLines should be a double, not an int. #35064

Open

zaidkazi mentioned this pull request Apr 9, 2021

TextFormField does not follow Min / Max Line rules as indicated. #80133

Closed

darshankawar mentioned this pull request Mar 11, 2022

TextField hint and input text go outside of given constraints. #99914

Closed

justinmc mentioned this pull request Mar 2, 2023

InputDecorator appears not to expand for entire widget #120633

Open

Fix TextField height issues #27205

Fix TextField height issues #27205

Uh oh!

Conversation

justinmc commented Jan 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Goals:

Proposal

Examples

Reference: Behavior Matrix

Uh oh!

tuliomagalhaes commented Jan 29, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

QoLTech commented Jan 29, 2019

Uh oh!

Will-W commented Jan 29, 2019

Uh oh!

justinmc commented Jan 29, 2019

Uh oh!

googlebot commented Jan 29, 2019

Uh oh!

justinmc commented Jan 29, 2019

Uh oh!

tuliomagalhaes commented Jan 29, 2019

Uh oh!

googlebot commented Jan 29, 2019

Uh oh!

googlebot commented Jan 29, 2019

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

tvolkert commented Mar 9, 2019

Uh oh!

zaidkazi commented Apr 9, 2021

Uh oh!

vqthanh1412489 commented Sep 16, 2021

Uh oh!

justinmc commented Sep 22, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

13 participants

justinmc commented Jan 28, 2019 •

edited

Loading

tuliomagalhaes commented Jan 29, 2019 •

edited

Loading