How to Move bottomsheet along with keyboard which has textfield(autofocused is true)? How to Move bottomsheet along with keyboard which has textfield(autofocused is true)? dart dart

How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?


Add isScrollControlled = true to BottomSheetDialog it'll allow the bottom sheet to take the full required height which gives more insurance that TextField is not covered by the keyboard.

Add Keyboard padding using MediaQuery.of(context).viewInsets.bottom

Note

If your BottomSheetModel is Column make sure you add mainAxisSize: 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: const EdgeInsets.symmetric(horizontal:18 ),      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,              ),              Padding(                padding: EdgeInsets.only(                    bottom: MediaQuery.of(context).viewInsets.bottom),                child: TextField(                  decoration: InputDecoration(                    hintText: 'adddrss'                  ),                  autofocus: true,                  controller: _newMediaLinkAddressController,                ),              ),              SizedBox(height: 10),            ],          ),    ));

Please 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.

padding: MediaQuery.of(context).viewInsets

UPDATED Flutter 2.2 breaks the changes again!” Now you need to give bottom padding once again so keyboard don't overlaps bottomsheet.


Just add:

  • isScrollControlled: true to showModalBottomSheet
  • padding: MediaQuery.of(context).viewInsets to widget in builder
  • column/wrap both works
showModalBottomSheet<void>(  isScrollControlled: true,  context: context,  shape: RoundedRectangleBorder(    borderRadius: BorderRadius.only(        topLeft: Radius.circular(30.0),        topRight: Radius.circular(30.0)),  ),  builder: (BuildContext context) {    return Padding(        padding: MediaQuery.of(context).viewInsets,        child: Container(            child: Wrap(          children: <Widget>[            TextField(              decoration: InputDecoration(                  border: InputBorder.none,                  hintText: 'Enter a search term'),            ),            TextField(              decoration: InputDecoration(                  border: InputBorder.none,                  hintText: 'Enter a search term'),            ),            TextField(              decoration: InputDecoration(                  border: InputBorder.none,                  hintText: 'Enter a search term'),            ),            TextField(              decoration: InputDecoration(                  border: InputBorder.none,                  hintText: 'Enter a search term'),            )          ],        )));  },);

Update Feb 25 2020 better solution

showModalBottomSheet( isScrollControlled: true, builder: (BuildContext context) {    return SingleChildScrollView(      child: Container(        padding:            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),        child: Padding(          padding: const EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 0.0), // content padding          child: Form(...)) // From with TextField inside});


In Order to focus on the Keyboard in BottomSheet - Wrap TextField in Padding Widget as like Below e.g Code:

showModalBottomSheet(              context: context,              builder: (context) {                return Container(                  child: Padding(                    padding: EdgeInsets.only(                        bottom: MediaQuery.of(context).viewInsets.bottom),                    child: TextField(                      autofocus: true,                    ),                  ),                );              });