How to expand a textField in flutter looks like a text Area
When i tap in textField in landScape mode i would like to expand in full screen likes whatsapp
Example gif Whats
TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
prefixIcon: Padding(
padding: EdgeInsets.all(0.0),
child: Icon(Icons.person,
size: 40.0, color: Colors.white),
),
hintText: "Input your opinion",
hintStyle: TextStyle(color: Colors.white30),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(new Radius.circular(25.0))),
labelStyle: TextStyle(color: Colors.white)),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
),
controller: host,
validator: (value) {
if (value.isEmpty) {
return "Empty value";
}
},
)
All you need to do is set the maxLines
variable when creating a TextField
.
I have added the text field inside a Card widget so you can see the total area.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Simple Material App"),
),
body: Column(
children: <Widget>[
Card(
color: Colors.grey,
child: Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
maxLines: 8,
decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
),
)
)
],
)
);
}
Set maxLines to null and keyboardType to TextInputType.multiline like this:
TextField(
maxLines: null,
keyboardType: TextInputType.multiline,
)