TextField hidden by keyboard in chat screen - flutter

Question

I am working on a chat screen. This is my current code for the starting UI:
class ChatOtroUsuario extends StatefulWidget {
const ChatOtroUsuario({Key key, this.usuario, this.otroUsuario}) : super(key: key);
final Usuario usuario;
final OtroUsuario otroUsuario;
#override
_ChatOtroUsuarioState createState() => _ChatOtroUsuarioState();
}
class _ChatOtroUsuarioState extends State<ChatOtroUsuario> {
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
print("usuario "+widget.usuario.username);
print("otor usuario "+widget.otroUsuario.username);
final bottom = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 60.0,
color: AppColors.blancoMovMap,
child: Row(
children: [
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.rojoMovMap,
),
child: Icon(
Icons.arrow_back_rounded,
color: Colors.white,
),
alignment: Alignment.center,
),
),
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamedAndRemoveUntil(
'/muro', (Route<dynamic> route) => false);
},
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.rojoMovMap,
),
child: Icon(
Icons.home,
color: Colors.white,
),
alignment: Alignment.center,
),
),
SizedBox(
width: 5,
),
CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(
widget.otroUsuario.profile_image),
),
SizedBox(
width: 5,
),
Text("${widget.otroUsuario.username}",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
],
),
),
Container(
color: Colors.amber,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height -110 ,
child: Text("hola"),
),
Container(
color: Colors.green,
height: 50,
child: TextField(
decoration: InputDecoration(
hintText: "Escribe tu mensaje...",
hintStyle: TextStyle(color: Colors.black,fontSize: 16)
),
),
)
],
),
),
),
);
}
}
The issue is that as it is now, when entering the textfield to write a message, the keyboard appears hidding the textfield.
As you may see, I have tried inserting all known solutions: wrapping the Column with a SingleChildScrollView widget, adding
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,
but keyboard is hidding the textfield, the view doesn't scroll together with the keyboard.

Answer 1

Try these
Remove both resizeToAvoidBottomInset: true, and resizeToAvoidBottomPadding: false,
Remove these lines padding: EdgeInsets.only(bottom: bottom), and change the Padding widget to a Container widget
`
print("usuario "+widget.usuario.username);
print("otor usuario "+widget.otroUsuario.username);
final bottom = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 60.0,
color: AppColors.blancoMovMap,
child: Row(
children: [
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.rojoMovMap,
),
child: Icon(
Icons.arrow_back_rounded,
color: Colors.white,
),
alignment: Alignment.center,
),
),
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamedAndRemoveUntil(
'/muro', (Route<dynamic> route) => false);
},
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.rojoMovMap,
),
child: Icon(
Icons.home,
color: Colors.white,
),
alignment: Alignment.center,
),
),
SizedBox(
width: 5,
),
CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(
widget.otroUsuario.profile_image),
),
SizedBox(
width: 5,
),
Text("${widget.otroUsuario.username}",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
],
),
),
Container(
color: Colors.amber,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height -110 ,
child: Text("hola"),
),
Container(
color: Colors.green,
height: 50,
child: TextField(
decoration: InputDecoration(
hintText: "Escribe tu mensaje...",
hintStyle: TextStyle(color: Colors.black,fontSize: 16)
),
),
)
],
),
),
),
);

Answer 2

Please try to wrap with SingleChildScrollView, or give bottom insets padding.
SingleChildScrollView(
child: Column(
children: <Widget>[
TextField(),
TextField(),
TextField(),
],),
),
OR
MediaQuery.of(context).viewInsets.bottom