Flutter when using phone keyboard, textbox gets hidden - flutter

Question

Im having problems with the phone keyboard getting in the way of the textbox that the user has to write in, due to that the user cant see whats hes writing, heres how it looks like
This is the screen without the keyboard
This is the screen with the keyboard
This is my current code for the textfield
TextFormField(
initialValue: '',
onChanged: (text) {
messageEntered = text;
},
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText:
Translations.of(context).trans('message'),
fillColor: Colors.white,
labelStyle: TextStyle(color: Colors.white)),
),
Is there anyway to prevent this?
Thank you for your time
Edit: this is my page code with the scaffold already wrapped
return showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return WillPopScope(
onWillPop: () {
return Future.value(true);
},
child: Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
color: Colors.red,
padding: const EdgeInsets.all(16.0),
width: double.infinity,
height: double.infinity,
child: Column(
children: <Widget>[
Container(height: 30),
new Text(
Translations.of(context).trans('sendmessage'),
style: TextStyle(color: Colors.white),
),
Container(
height: 30,
),
DropdownButton(
focusColor: Colors.white,
hint: new Text(
Translations.of(context).trans('sendto'),
style: TextStyle(color: Colors.white),
),
isExpanded: true,
onChanged: (value) {
setState(() => selected = value);
setState(() => toEntered = selected);
},
value: selected,
items: workers.map((worker) {
return DropdownMenuItem(
child: new Text(worker.vNome),
value: worker.vCodigo,
);
}).toList(),
),
Container(
height: 30,
),
TextFormField(
initialValue: date,
onChanged: (text) {
dateEntered = text;
},
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText:
Translations.of(context).trans('date'),
fillColor: Colors.white,
labelStyle: TextStyle(color: Colors.white))),
Container(
height: 30,
),
TextFormField(
initialValue: hour,
onChanged: (text) {
hourEntered = text;
},
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText:
Translations.of(context).trans('hour'),
fillColor: Colors.white,
labelStyle: TextStyle(color: Colors.white))),
Container(
height: 30,
),
TextFormField(
initialValue: '',
onChanged: (text) {
messageEntered = text;
},
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText:
Translations.of(context).trans('message'),
fillColor: Colors.white,
labelStyle: TextStyle(color: Colors.white)),
),
Spacer(),
Row(
children: <Widget>[
FlatButton(
textColor: Colors.white,
color: Colors.red[800],
child: Text(Translations.of(context)
.trans('sendmessage')),
onPressed: () {
sendMessage();
}),
Spacer(),
FlatButton(
textColor: Colors.white,
color: Colors.red[800],
child: Text(Translations.of(context)
.trans('closealert')),
onPressed: () {
setState(() => selected = null);
Navigator.of(context).pop();
}),
],
),
],
),
),
));
});
});

Answer 1

Try this,
return showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setState) {
return WillPopScope(
onWillPop: () {
return Future.value(true);
},
child: Scaffold(
body: LayoutBuilder(
builder: (context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraint.maxHeight,
),
child: IntrinsicHeight(
child: Container(
color: Colors.red,
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(height: 30),
new Text(
Translations.of(context).trans('sendmessage'),
style: TextStyle(color: Colors.white),
),
Container(
height: 30,
),
DropdownButton(
focusColor: Colors.white,
hint: new Text(
Translations.of(context).trans('sendto'),
style: TextStyle(color: Colors.white),
),
isExpanded: true,
onChanged: (value) {
setState(() => selected = value);
setState(() => toEntered = selected);
},
value: selected,
items: workers.map((worker) {
return DropdownMenuItem(
child: new Text(worker.vNome),
value: worker.vCodigo,
);
}).toList(),
),
Container(
height: 30,
),
TextFormField(
initialValue: date,
onChanged: (text) {
dateEntered = text;
},
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText:
Translations.of(context).trans('date'),
fillColor: Colors.white,
labelStyle: TextStyle(color: Colors.white),
),
),
Container(
height: 30,
),
TextFormField(
initialValue: hour,
onChanged: (text) {
hourEntered = text;
},
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText:
Translations.of(context).trans('hour'),
fillColor: Colors.white,
labelStyle: TextStyle(color: Colors.white),
),
),
Container(
height: 30,
),
TextFormField(
initialValue: '',
onChanged: (text) {
messageEntered = text;
},
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: Translations.of(context)
.trans('message'),
fillColor: Colors.white,
labelStyle: TextStyle(color: Colors.white),
),
),
Spacer(),
Row(
children: <Widget>[
FlatButton(
textColor: Colors.white,
color: Colors.red[800],
child: Text(Translations.of(context)
.trans('sendmessage')),
onPressed: () {
sendMessage();
},
),
Spacer(),
FlatButton(
textColor: Colors.white,
color: Colors.red[800],
child: Text(
Translations.of(context)
.trans('closealert'),
),
onPressed: () {
setState(() => selected = null);
Navigator.of(context).pop();
},
),
],
),
],
),
),
),
),
);
},
),
),
);
},
);
},
);