How to make flutter TextField height match parent of container?

Question

I want to make my TextField height the same as my container height. Please check my code below and let me know how can I make TextField match_parent of my container. I've checked this question The equivalent of wrap_content and match_parent in flutter? but I didn't find any solution. I need to make TextField to take full height and width of my container.

 new Container(
            height: 200.0,
            decoration: new BoxDecoration(
                border: new Border.all(color: Colors.black)
            ),

            child: new SizedBox.expand(
              child: new TextField(
                maxLines: 2,
                style: new TextStyle(
                    fontSize: 16.0,
                   // height: 2.0,
                    color: Colors.black
                ),
                  decoration: const InputDecoration(
                    hintText: "There is no data",
                    contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
                  )
              ),
            ),
          )

Please check the screenshot below. As said, I need my TextField to take full height of Container

Possible duplicate of [The equivalent of wrap\_content and match\_parent in flutter?](https://stackoverflow.com/questions/42257668/the-equivalent-of-wrap-content-and-match-parent-in-flutter) — Ahmet Zorer, Aug 07 '18 at 06:55

score 12 · Answer 1 · answered Mar 13 '19 at 19:18

Here is my solution:

Container(
            height: 200,
            color: Color(0xffeeeeee),
            padding: EdgeInsets.all(10.0),
            child: new ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: 200.0,
              ),
              child: new Scrollbar(
                child: new SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  reverse: true,
                  child: SizedBox(
                    height: 190.0,
                    child: new TextField(
                      maxLines: 100,
                      decoration: new InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Add your text here',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

It works pretty good for me. And here is a screen shot.

score 8 · Answer 2 · answered Jun 01 '21 at 16:40

Answering this in 2021. There is an expands property available now. This code works:

Column(
  children: [
    Expanded(
        child: TextField(
          maxLines: null, 
          minLines: null, 
          expands: true,
        ), 
        flex: 1),
  ],
)

score 1 · Answer 3 · answered Aug 08 '18 at 04:59

1

Let's remove a few lines in code and understand how flutter works.

Why we are giving height 200 to Container. Can't the Container adjust the height based on its child (in this case SizedBox.expand)
If we remove height 200, then Container occupied the entire screen because of SizedBox.expand
Do we really need the SizedBox for our use case. Let's remove that also see what happens.
Now our Container wraps the TextField. But there is some space above and below.
Who decided that space? TextField's decoration's contentPadding. Let's remove that also. It looks like below where textField wrapped by Container. Hope this is what you want. If not, please comment, we can tweak a bit and get what you want. Cheers

Final version of code which displays the above image

 new Container(
   //   height: 200.0,
      decoration: new BoxDecoration(
          border: new Border.all(color: Colors.black)
      ),

      child: new TextField(
          maxLines: 2,
          style: new TextStyle(
              fontSize: 16.0,
              // height: 2.0,
              color: Colors.black
          ),
          decoration: const InputDecoration(
            hintText: "There is no data",
//                contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
          )
      ),
    )

answered Aug 08 '18 at 04:59

Dinesh Balasubramanian

20,532
7
64
57

Thanks @Dinesh, actually I need a fixed height of my `Container` and to make my `TextFiled` to take this height. – Ammy Kang Aug 08 '18 at 14:59
Hi Ammy, How are you giving height to your TextField ? – Dinesh Balasubramanian Aug 08 '18 at 16:28
currently I am using `maxline` attribute to give height to `TextField`, but this is not a good a practice. – Ammy Kang Aug 09 '18 at 07:53
Got it.. 1) It is highly coupled with fontSize. 2) I am not sure whether it will affect if you change the device (like tablet, iPad). For now, it solves the problem. Have a eye on above two problems. – Dinesh Balasubramanian Aug 09 '18 at 10:05
Yes, I know problems may occur, this is temporary fix for now, can you please help me with this? I need to make my container height fix all time. – Ammy Kang Aug 09 '18 at 10:37
I will try my best to help. Can you share the UI requirements/mockups ? – Dinesh Balasubramanian Aug 09 '18 at 10:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/177717/discussion-between-ammy-kang-and-dinesh-balasubramanian). – Ammy Kang Aug 09 '18 at 10:48
1

Did you two find a solution? I am unable to make a TextField automatically size its height to fit inside a flexible height container. – Luke Pighetti Sep 17 '18 at 14:19

score 0 · Answer 4 · answered Jan 13 '21 at 13:41

Currently the only way to achieve the TextField to fill the available vertical space is:

TextField(maxLines: 1000000) //maxlines: any large int

While it is tempting to use TextField(maxLines: null), it will just set the TextField to expand with its content, until it reaches its container limit.

I think there needs to be a bool stretchVertically parameter. TextField(stretchVertically: true) would mean that the TextField will try to fill as much vertical space as it can. stretchVertically and maxLines would have to be mutually exclusive.

How to make flutter TextField height match parent of container?

4 Answers4