Reputation: 12612
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
Upvotes: 15
Views: 23389
Reputation: 949
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),
],
)
Upvotes: 10
Reputation: 6201
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.
Upvotes: 0
Reputation: 2132
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.
Upvotes: 12
Reputation: 21758
Let's remove a few lines in code and understand how flutter works.
200
to Container. Can't the Container
adjust the height based on its child (in this case SizedBox.expand)Container
occupied the entire screen because of SizedBox.expand
SizedBox
for our use case. Let's remove that also see what happens.Container
wraps the TextField
. But there is some space above and below.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),
)
),
)
Upvotes: 1