- To fix this issue
-
All you need is to use Keyboard padding using
MediaQuery.of(context).viewInsets.bottom
-
For more insurance, set
isScrollControlled = true
of theBottomSheetDialog
this will allow the bottom sheet to take the full required height.
-
Note if your
BottomSheetModel
isColumn
make sure you addmainAxisSize: MainAxisSize.min
otherwise the sheet will cover the whole screen. -
Example
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
backgroundColor: Colors.black,
context: context,
isScrollControlled: true,
builder: (context) => Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Text('Enter your address',
style: TextStyles.textBody2),
),
SizedBox(
height: 8.0,
),
TextField(
decoration: InputDecoration(
hintText: 'adddrss'
),
autofocus: true,
controller: _newMediaLinkAddressController,
),
SizedBox(height: 10),
],
),
));
Also note that:
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
It’s not required. It’s just that I’m creating a rounded bottom sheet.
- UPDATED
Flutter 2.2 breaks the changes again!” Now you need to give bottom padding once again so the keyboard doesn’t overlap the bottomsheet.