Keyboard closes the Modal BottomSheet in Flutter - flutter

Question

When I want to write some text in Textfield, the Keyboard closes my modal bottom sheet. I can't understand, why this is happening. I try to used this line of code:
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
But in output I get textfield, which stretches.
I spent a lot of time to solve this problem and I really want to close this issue.
This is full code
import 'package:flutter/material.dart';
class NutritionScreen extends StatefulWidget {
#override
_NutritionScreenState createState() => _NutritionScreenState();
}
class _NutritionScreenState extends State<NutritionScreen> {
double height = 500.0;
void _modalBottomSheetMenu(){
showModalBottomSheet(
context: context,
builder: (builder){
return new Container(
height: height,
color: Colors.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Питание",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 26.0),
)),
Padding(
padding: EdgeInsets.only(
bottom: 8.0,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Возраст",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: 8.0,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Рост",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Целевой вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
],
)),
));
}
);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xff2b2b2b),
appBar: AppBar(
backgroundColor: Colors.lightGreen[400],
title: Text(
'Питание',
style: new TextStyle(
color: Colors.white
),),
leading: IconButton(
icon:Icon(Icons.arrow_back),
color: Colors.white ,
onPressed:() => Navigator.of(context).pop(),
),
),
body: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(bottom: 45.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 200.0),
child: Text(
"Нажми на кнопку, чтобы добавить правильный рацион питания.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20.0),
)),
FloatingActionButton(
heroTag: "tag3",
backgroundColor: Color(0xffFF7070),
child: Icon(Icons.add, color: Colors.white),
onPressed: () {
_modalBottomSheetMenu();
}),
],
),
),
);
}
}

Answer 1

You don't need to wrap each filed with padding widget - simply wrap your primary Container with padding widget with-
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom)
.
Updated Code:
class NutritionScreen extends StatefulWidget {
#override
_NutritionScreenState createState() => _NutritionScreenState();
}
class _NutritionScreenState extends State<NutritionScreen> {
double height = 500.0;
void _modalBottomSheetMenu() {
showModalBottomSheet(
context: context,
builder: (builder) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: new Container(
height: height,
color: Colors
.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Питание",
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.black, fontSize: 26.0),
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Возраст",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Рост",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Целевой вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
],
)),
)),
);
});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xff2b2b2b),
appBar: AppBar(
backgroundColor: Colors.lightGreen[400],
title: Text(
'Питание',
style: new TextStyle(color: Colors.white),
),
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
onPressed: () => Navigator.of(context).pop(),
),
),
body: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(bottom: 45.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 200.0),
child: Text(
"Нажми на кнопку, чтобы добавить правильный рацион питания.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20.0),
)),
FloatingActionButton(
heroTag: "tag3",
backgroundColor: Color(0xffFF7070),
child: Icon(Icons.add, color: Colors.white),
onPressed: () {
_modalBottomSheetMenu();
}),
],
),
),
);
}
}

Answer 2

Modal Bottom Sheet which sticks to top of keyboard
MBS: Modal Bottom Sheet
In Container use margin for keyboard space and use padding for content.
This reduce height of MBS by keyboard height and stick MBS to top of keyboards (This can seen when keyboard opening or closing).
isScrollControlled: true for allow to change heigth of MBS
margin for giving empty space for keyboard with MediaQuery
padding optionel content padding
showModalBottomSheet(
isScrollControlled: true,
builder: (BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), // Keyboard margin
padding: const EdgeInsets.all(20) // Content padding
child: ... // You wiget tree
);
},
);