Whatsapp Input TextFieldForm style in Flutter - flutter

Question

How can I make a TextField/ TextFieldForm that behaves exactly like Whatsapp? For example, I want to implement a functionality where my TextField expands as user has more lines of words. Here is my code:
body: Stack(
alignment: Alignment.topCenter,
clipBehavior: Clip.antiAlias,
children: <Widget>[
Container(
alignment: Alignment.bottomCenter,
margin: const EdgeInsets.only(top: 60),
child: Container(
margin: const EdgeInsets.only(top: 60),
constraints: const BoxConstraints(
minHeight: 70,
maxHeight: 78,
),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 15),
decoration: const BoxDecoration(
color: Color(0xFF4A78FF),
border: Border(
top: BorderSide(
color: Colors.black87,
),
),
),
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: <Widget>[
Expanded(
child: TextField(
textAlign: TextAlign.justify,
textAlignVertical: TextAlignVertical.top,
keyboardType: TextInputType.text,
// minLines: 1,
maxLines: null,
style: GoogleFonts.alegreya(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.black,
),
controller: messageController,
decoration: InputDecoration(
filled: true,
fillColor: Colors.black12,
border: OutlineInputBorder(
borderSide: const BorderSide(
width: 2,
),
borderRadius: BorderRadius.circular(50),
),
),
onChanged: (String value) {
if (messageController.text != '') {
setState(() {
writeMessage = false;
});
} else {
setState(() {
writeMessage = true;
});
}
}),
),
IconButton(
alignment: Alignment.topCenter,
padding: const EdgeInsets.only(bottom: 30),
onPressed: () {
addMessages(true);
FocusScope.of(context).requestFocus(FocusNode());
scrollController.animateTo(
scrollController.position.maxScrollExtent,
curve: Curves.easeOut,
duration: const Duration(milliseconds: 300),
);
},
icon: writeMessage
? const Icon(
Icons.insert_photo,
color: Colors.black87,
size: 37,
)
: const Icon(
Icons.send,
color: Colors.black87,
size: 37,
)),
],
),
),
),
),
],
),
I tried this but it does not expands and it almost hides my words in the TextField. The context here is that I want to build a Flutter Chat App. Thank you for you help!

Answer 1

try this
Flexible(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
maxWidth: MediaQuery.of(context).size.width,
minHeight: 30.0,
maxHeight: 250.0,
),
child: Scrollbar(
child: TextField(
cursorColor: Colors.blue,
keyboardType: TextInputType.multiline,
maxLines: null,
controller: controller,
_handleSubmitted : null,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
top: 5.0,
left: 15.0,
right: 15.0,
bottom: 5.0),
hintText: "Type your message",
hintStyle: TextStyle(
color:Colors.grey,
),
),
),
),
),
),