Bottom sheet covered by keyboard

Question

friends!

I create FAB bottom sheet and want to make it to be "search" text field. But, when i push the FAB, it turns out, that keyboard appears and lays on the bottom sheet, so I can't see what I really type. Wanting to push bottom sheet up by using solutions recommended here:

Scaffold( resizeToAvoidBottomPadding: false, body: ...)

or

new Scaffold(
body: SingleChildScrollView(child: //your existing body...)

But, it doesn't work. Here is the result: Bottom Sheet Appears

Keyboard covers the sheet

and here is my code:

 return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
        elevation: 0.1,
        backgroundColor: Colors.lightBlue,
        title: Text('WOW!'),
        actions: <Widget>[
          new IconButton(
            icon: Icon(
              Icons.shopping_cart,
              color: Colors.white,
            ),
            onPressed: () => Navigator.push(
                context, MaterialPageRoute(builder: (context) => new cart())),
          )
        ],
      ),
      floatingActionButton: new FloatingActionButton(
          child: const Icon(Icons.search),
          backgroundColor: Colors.lightBlue,
          onPressed: () => modal.mainBottomSheet(context)),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      bottomNavigationBar: new BottomAppBar(
        color: Colors.white,
      ),


And here is the modal, that the code routes to:

  

    class Modal {mainBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
              color: Colors.white,
              padding: EdgeInsets.symmetric(horizontal: 30),
              height: 400,
              child: SingleChildScrollView(
                child: Column(children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 12.0),
                    child: Row(
                      children: <Widget>[
                      Icon(Icons.search),
                      Text(' SEARCH'),
                ],
                    ),
                  ),
                  Divider(
                    height: 8.0,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Row(children: <Widget>[
                    Expanded(child: Text('Keyword')),
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.symmetric(vertical: 10.0),
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(5))),
                        style: TextStyle(),
                      ),
                    ),],),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Row(children: <Widget>[
                      Expanded(child: Text('Category')),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(vertical: 10.0),
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(5))),
                          style: TextStyle(),
                        ),
                      ),],),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Row(children: <Widget>[
                      Expanded(child: Text('Based')),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(vertical: 10.0),
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(5))),
                          style: TextStyle(),
                        ),
                      ),],),
                  ),
                  Divider(
                    height: 0.0,
                  ),
                  ButtonBar(
                    alignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        width: 125,
                        child: RaisedButton(
                          color: Colors.redAccent,
                          child: Text(
                            'Cancel',
                            style: TextStyle(color: Colors.white),
                          ),
                          onPressed: () {},
                        ),
                      ),
                      Container(
                        width: 125,
                        child: RaisedButton(
                          color: Colors.lightBlue,
                          child: Text(
                            'Find Now!',
                            style: TextStyle(color: Colors.white),
                          ),
                          onPressed: () {},
                        ),
                      ),
                    ],
                  ),
                ]),
              ));
        });
  }
}

Has anybody found solutions to solve it? Thanks!

Answer 1

add resizeToAvoidBottomInset: true, to your scaffold widget , add isScrollControlled: true to your showModalBottomSheet method , and wrap all your widgets inside a Padding our animated Padding and set padding to: padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)

return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: Color(0xFFFCFCFC),
      appBar: AppBar()
      ....

showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return AnimatedPadding(
          duration: Duration(milliseconds: 150),
          curve: Curves.easeOut,
          padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Container(
          ...

Answer 2

Please use the following code

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return SingleChildScrollView(
          child: Container(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom),
        child: PlaceYourChildWidget(),
      ));
    });

Answer 3

use isScrollControlled: true, in showModalBottomSheet