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

  • To fix this issue
  1. Add isScrollControlled = true to BottomSheetDialog it’ll allow the bottom sheet to take the full required height which gives more insurance that the keyboard does not cover TextField.

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

  • Note
  1. If your BottomSheetModel is Column make sure you add mainAxisSize: MainAxisSize.min, otherwise the sheet will cover the whole screen.

  2. Works with multiple TextField or TextFormField

  • 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),
                ],
              ),
        ));

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.

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

Leave a Comment