Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make flutter TextField height match parent of container?

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

enter image description here

like image 259
Ammy Kang Avatar asked Aug 07 '18 06:08

Ammy Kang


People also ask

How do I change the height of my TextField Flutter?

To change the TextField height by changing the Font Size: Step 1: Inside the TextField, Add the style parameter and assign the TextStyle(). Step 2: Inside the TextStyle(), Add the fontSize parameter and set the appropriate value.

What is Match_parent in Flutter?

In Android match_parent and wrap_content are used to resize the widgets automatically relative to their parent to the content the widget contains.


3 Answers

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.

enter image description here

like image 145
Jack Sun Avatar answered Oct 19 '22 02:10

Jack Sun


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

  1. Why we are giving height 200 to Container. Can't the Container adjust the height based on its child (in this case SizedBox.expand)
  2. If we remove height 200, then Container occupied the entire screen because of SizedBox.expand
  3. Do we really need the SizedBox for our use case. Let's remove that also see what happens.
  4. Now our Container wraps the TextField. But there is some space above and below.
  5. 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 enter image description here

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),
          )
      ),
    )
like image 20
Dinesh Balasubramanian Avatar answered Oct 19 '22 04:10

Dinesh Balasubramanian


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),
  ],
)
like image 6
SayantanRC Avatar answered Oct 19 '22 02:10

SayantanRC