Keyboard pushes modalBottomSheet out of the bounds, resizeToAvoidBottomInset not working
Ok, so I found a solution for this issue myself.
I wanted the modal bottom sheet to occupy 80% of the screen, but it was always pushed by the keyboard. In order to fix this I wrapped the main Container in a Column widget and added an additional transparent Container with a GestureDetector (to dismiss the bottom sheet) having the height 20% of the screen. After that I wrapped the Column in a SingleChildScrollView. Now everything works as expected! I added a video below.
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => SingleChildScrollView(
child: Column(children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
color: Colors.transparent,
height: MediaQuery.of(context).size.height * 0.2,
),
),
Container(
height: MediaQuery.of(context).size.height * 0.8,
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(25.0),
topRight: const Radius.circular(25.0),
),
),
child: SearchPlace((place, alreadyExists) => {
Navigator.pop(context),
didSelectPlace(place, alreadyExists),
})),
]),
),
);
Mircea Dragota
Updated on December 01, 2022Comments
-
Mircea Dragota over 1 year
I ran into problem in a Flutter application. The keyboard pushes the modal bottom sheet up even if the Scaffold has resizeToAvoidBottomInset set to false. I want the modal bottom sheet to remain at its initial position. I will show you my code for displaying the modal bottom sheet and I will attach a video to show you the bug.
Scaffold( resizeToAvoidBottomInset: false, key: _scaffoldKey, body: ... ) showModalBottomSheet( context: context, isScrollControlled: true, backgroundColor: Colors.transparent, builder: (context) => Container( height: MediaQuery.of(context).size.height * 0.8, decoration: new BoxDecoration( color: Colors.white, borderRadius: new BorderRadius.only( topLeft: const Radius.circular(25.0), topRight: const Radius.circular(25.0), ), ), child: SearchPlace((place, alreadyExists) { Navigator.pop(context); didSelectPlace(place, alreadyExists); })), );
Hope you can help me, thanks!
-
dave o grady about 3 yearsWorked perfectly for me, thanks!! Keyboard does not push it anymore