I have modal bottom sheet, with the following simplified structure:
showModalBottomSheet(
isScrollControlled: true,
...
builder: (BuildContext context) {
return Padding(
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: StatefulBuilder(
builder: (BuildContext context, StateSetter setModalState){
return SizedBox(
height: MediaQuery.of(context).size.height,
child: Stack(
children: [
getBackgroundImage(),
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// ... ELEMENTS (text, TEXTFIELD, button, ...)
],
)
),
],
)
);
}
),
);
}
);
The problem is following: When I open this in smaller device, the bottom modal sheet is displayed well, it is scrollable. But when I click on TextField that is inside, and the keyboard opens, then although everything seems to be working, following issue is displayed in the log:
A RenderFlex overflowed by 144 pixels on the bottom.
Can somebody help with this? I checked various sources and forums, but I did not find any relevant answer. Thank you.
I have solved this by adding this to my
Scaffold: