Allow multiline TextField to expand vertically to fit container

This is the only way I have been able to achieve this and its pretty hacky. Would be nice if TextFields were able to expand vertically to fit the container.

Container(
  margin: EdgeInsets.all(8.0),
  // hack textfield height
  padding: EdgeInsets.only(bottom: 40.0),
  child: TextField(
    maxLines: 99,
    decoration: InputDecoration(
        hintText: "Comment!",
        border: OutlineInputBorder(),
    ),
  ),
),

What part do you find hacky?
How would you prefer it to be?

Please add the output of flutter doctor -v.

Having to put it in a container with an arbitrary 40px padding and force it to try to spill by giving it a maxLines of 99 just to get it to flex to height. An expanded: false or flexible: true property would be ideal

Due to the speed of flutter development my flutter doctor -v has changed considerably since I made this post. Sorry about that.

Thanks for your update!

I don't think flutter doctor output is essential for this feature request.
I just try to annoy people with requesting it until everyone adds it automatically everywhere ;-)

Actually flutter doctor -v output provides some context that is usually helpful and often essential.

The user expectation (sample size: me) is that you would be able to do this:

Column(
  children: <Widget>[
    AFixedSizeWidget(),
    Expanded(
      child: TextField(),
    )
  ],
)

This is how you lay out every other set of widgets in a column, it's a surprise that the TextField handles its own size and doesn't expand. Possibly based on implementation, you may also need to set maxLines: null or some other value.

https://stackoverflow.com/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli/51205467 might do what you want.

@zoechi

@zoechi That is a solution to a separate problem (a problem I also have, and the solution that I'm using). That is about changing the size of the textfield based on amount of content. This issue is about a textfield that has a fixed size (for a given screen size), taking up the remaining space.

E.g., you can do this:

Column(children: [
          Container(height: 100.0),
          Expanded(child: Placeholder())
        ])

100 px of the available height will be a container, and the rest will be the Placeholder. You can replace the placeholder with most normal widgets and get the same behaviour. If you replace it with a TextField, that's not what happens, and this is surprising.

[Edited as per following comments]

@Will-W

@Will-W

This issue is about a textfield that scales once

I couldn't find a mention of scale in this issue and don't think it is about scaling text.

If your comment is about scaling text to a size, please check StackOverflow (I'm sure there is at least one question) and https://pub.dartlang.org (I'm also pretty sure there is a package that provides that)

I'm sorry, the use of the word "scale" was very misleading - I was trying to make it more clear not less! "Changes size" would be more appropriate. I have edited the comment as such.

@Will-W

@Will-W I'm working some changes that should make TextFields work with Expandeds as expected by using an expands parameter. I wrote up a proposal if you want to take a look: #27205

Looks like a dup of #18825, #15388

@Will-W

Closing this with #27205.

The expands parameter on TextField will do what's desired in this issue and allow the TextField to be sized based on its parent. So @Will-W's example could be achieved like this now:

Column(children: [
  Container(height: 100.0),
  Expanded(
    child: TextField(expands: true),
  )
])

To get it like a WhatsApp textbox which increases height up to a few lines then stop,

ConstrainedBox(
        constraints: BoxConstraints(
          maxHeight: 100 //put here the max height to which you need to resize the textbox
        ),
child: TextField(
maxLines: null, ),
)

Make alignLabelWithHint: true inside InputDecoration .

return TextFormField(
      keyboardType: TextInputType.multiline,
      textInputAction: TextInputAction.newline,
      maxLines: 16,
      maxLength: 512,
      maxLengthEnforced: true,
      initialValue: _content,
      decoration: InputDecoration(
        labelText: 'Content',
        hintText: 'Enter contetn',
        alignLabelWithHint: true,
        labelStyle: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500),
      ),
      validator: (value) =>
          value.isNotEmpty ? null : 'content can\'t be empty',
      style: TextStyle(fontSize: 20.0, color: Colors.white),
      onSaved: (content) => _content = content,
    );
  }

@Will-W

Closing this with #27205.

The expands parameter on TextField will do what's desired in this issue and allow the TextField to be sized based on its parent. So @Will-W's example could be achieved like this now:
Column(children: [
  Container(height: 100.0),
  Expanded(
    child: TextField(expands: true),
  )
])

I try it, I got error

I try it, I got error

Please provide a code snippet for reproduction. Thanks!

@Will-W

Closing this with #27205.
The expands parameter on TextField will do what's desired in this issue and allow the TextField to be sized based on its parent. So @Will-W's example could be achieved like this now:
Column(children: [
  Container(height: 100.0),
  Expanded(
    child: TextField(expands: true),
  )
])
I try it, I got error

I suspect the error you have got is assert. When you use expanded = true both minLines and maxLines have to be null. All that said, the correct code snippet should be:

TextField(expands: true, minLines: null, maxLines: null)

Sample worked codes:

Container(
            child: new TextField (
              keyboardType: TextInputType.multiline,
              minLines: 1,
              maxLines: 10,
              decoration: new InputDecoration(
                  border: new OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(10.0),
                    ),
                  ),
                  filled: true,
                  hintStyle: new TextStyle(color: Colors.grey[800]),
                  hintText: "Type in your text",
                  fillColor: Colors.white70),
            ),
            padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
          );

TextField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
)

Links: 1, 2.

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.

Navigation Menu

Repository navigation

Allow multiline TextField to expand vertically to fit container #21943

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Allow multiline TextField to expand vertically to fit container #21943

Description

Activity

lukepighetti commented on Sep 17, 2018

zoechi commented on Sep 25, 2018

lukepighetti commented on Sep 25, 2018

zoechi commented on Sep 25, 2018

Will-W commented on Dec 14, 2018

zoechi commented on Jan 15, 2019

Will-W commented on Jan 15, 2019

zoechi commented on Jan 15, 2019

Will-W commented on Jan 15, 2019

justinmc commented on Jan 29, 2019

zoechi commented on Jan 29, 2019

justinmc commented on Mar 8, 2019

AshfaqAshi commented on Jun 11, 2020

vokhidovhusan commented on Jun 24, 2020

note8g2018 commented on Jul 6, 2020

lukepighetti commented on Jul 6, 2020

angel1st commented on Jul 27, 2020

omidraha commented on May 19, 2021

github-actions commented on Aug 1, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions