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

[rmtmckenzie]

The new changes from @justinmc (#27205 and then #29250) are great but still leave me with a problem. When I set my textfield to expanded, the text is then centered vertically, whereas I want it to be at the top. I can't figure out a way to do this.

I would expect the behaviour of expands to be the same as setting maxlines; that is, the text would stay at the top.

If the default cannot be changed (and now would be the time since it was only introduced recently) then an option to align the text vertically when expanded = true would be great.

[justinmc]

I see text aligned to the top when expands is true.

Container(
  height: 200,
  color: Colors.greenAccent,
  child: TextField(expands: true, maxLines: null),
),

What does your code look like to get something that is vertically centered?

[rmtmckenzie]

Oh interesting. I've just been playing around with it and it turns out that if I use an outline input border, the text is centered, but if I use an UnderlineInputBorder it's at the top.

OutlineInputBorder(
  borderSide: BorderSide(width: 1, color: Colors.black, style: BorderStyle.solid),
  borderRadius: BorderRadius.circular(0),
)

results in:

whereas with no other changes

UnderlineInputBorder(
  borderSide: BorderSide(width: 1, style: BorderStyle.solid, color: Colors.black),
),

results in:

[rmtmckenzie]

That actually resolves the issue for me because I don't want any border at all so I'm setting the border width to 0 and style to .none anyways, so I can easily switch to underline... but I'll leave the issue open because it's likely someone else will run into it soon!

[justinmc]

You're right, thanks for pointing that out! I'll take a look at this.

[justinmc]

It looks like text inside of outlined inputs was intentionally centered, as per the Material spec.

@willlarche Do you have an opinion on this? Is it still true that the material spec wants text in an outlined input to be centered, or is the real solution to implement this via a TextArea or something?

[willlarche]

Is this a question of how multiline or singleline textfields behave when they are that tall?

If multiline, the text should be at the top.

If singleline, the design guidance doesn't afford for this kind of height. So, feel free to build in an API that allows .start, .center, .end vertical alignment.

The spec technically supports having the label not cross the top line on an outline, an M1.5 design for text areas, which means the text would start even lower than the top on those. So, I guess the text input rect should be vertically relative to the label OR the border.

Does that make sense?

[justinmc]

@willlarche That answers my question, thank you!

So for single line, I'll keep an eye out for people that want alignment functionality. Right now it's pretty hard to even make a tall single line input (to my knowledge), so I think it's probably an edge case.

For multiline, it sounds like we need a PR to align text to the top even when the input is outlined. We also might want to add a flag to allow keeping the label below the border to comply with the spec.

I'll keep this issue open to track this.

[bdshadow]

I also bumped into this problem (firstly that i didn't manage to expand the TextField, later to this issue). I even asked a question on Stackoverflow, because didn't find these bugs in github first. In my case, i needed a border all around the TextField. So i solved this by putting the TextField into the DecoratedBox:

Expanded(
      child: DecoratedBox(
        decoration: BoxDecoration(
            border: Border.all(
                color: _focus.hasFocus ? Theme.of(context).primaryColor : Theme.of(context).disabledColor,
                width: _focus.hasFocus ? 2.0 : 1.0),
            borderRadius: BorderRadius.all(Radius.circular(4.0))),
        child: TextField(
          focusNode: _focus,
          keyboardType: TextInputType.multiline,
          textAlign: TextAlign.start,
          maxLength: null,
          maxLines: null,
          expands: true,
          decoration: const InputDecoration(contentPadding: const EdgeInsets.all(8.0), border: InputBorder.none),
          controller: _textToSubmitController,
        ),
      ),
    )

Hope it will save somebody's time

[justinmc]

You can now achieve any vertical alignment you want using TextField's new textAlignVertical param. See #34355 (comment) for a detailed explanation of its effects.

You'll need to be on the master channel to get this change, or to be using a version greater than 1.7.4 once it's released.

I'm working on adding the same param to CupertinoTextField now.

[gazialankus]

@justinmc It seems textAlignVertical is not there for TextFormField. Would it be possible to have it there as well?

[justinmc]

Yes, sorry, I really should have added that in the original PR! I just opened an issue here: #39123

[rmtmckenzie]

@gazialankus you're probably best off opening a new issue for that and referring to this one in it.

[rmtmckenzie]

oops @justinmc you just barely beat me to it =D

[justinmc]

Haha yup beat you by a second or two.

[justinmc]

@gazialankus I just merged the PR to add textAlignVertical to TextFormField!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.