Set maxLines
to null and it will auto grow vertically.
It's documented (but not entirely clearly) here (edit: I've created a PR to update this, which I should've done to begin with for this question ;). To figure it out I ended up looking at the code for TextField
and its superclass(es), seeing what the behavior would be if set to null.
So your code should be as follows:
new TextField(
decoration: const InputDecoration(
hintText: 'Reply',
labelText: 'Reply:',
),
autofocus: false,
focusNode: _focusnode,
maxLines: null,
controller: _newreplycontroller,
keyboardType: TextInputType.text,
),
If you're trying to make it autogrow horizontally, you probably shouldn't - at least not based on the text content. But I'm asuming you want to make it autogrow vertically.
1. Solution Summary
FlatButton
and RaisedButton
are deprecated.
So, you can use shape
which placed in the style
property, for TextButton
and ElevatedButton
.
There are some changes since Flutter 2.0:
2. Rounded Button
Inside the style
property exists the shape
property:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
)
Square Button
For a square button you can use ElevatedButton
or otherwise add:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
)
Complete Example
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
child: Text(
"Add to cart".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
),
SizedBox(width: 10),
ElevatedButton(
child: Text(
"Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
)
]
)
Best Answer
To use auto wrap, just set
maxLines
asnull
:If the
maxLines
property isnull
, there is no limit to the number of lines, and the wrap is enabled.