How to Move bottomsheet along with keyboard which has textfield?

 

• 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 TextField is not covered by the keyboard.

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

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