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!

try changing `resizeToAvoidBottomPadding: false` to `resizeToAvoidBottomPadding: true` — Ryosuke, Mar 20 '19 at 13:22
I've just tried what you said. But not solved yet, bro.. Thanks.. — Ayam Millenial, Mar 20 '19 at 13:36
Correct answer for Flutter 3: https://stackoverflow.com/a/76219183/11626514 — Julio Cesar Reis, May 10 '23 at 13:49

score 43 · Answer 1 · answered Mar 07 '20 at 15:11

43

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(),
      ));
    });

answered Mar 07 '20 at 15:11

Sanjay Sharma

3,687
2
22
38

Thanks dear, saved my life, thumbs up :) – Kamlesh Nov 20 '21 at 13:08
Awesome, great answer. Seems like you're the only one on the whole internet who had it. – Tyler Petrov Dec 09 '22 at 23:03

score 16 · Answer 2 · answered May 19 '20 at 20:28

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

score 1 · Answer 3 · answered Dec 03 '19 at 20:12

1

use isScrollControlled: true, in showModalBottomSheet

answered Dec 03 '19 at 20:12

SumOn

306
1
4

score 0 · Answer 4 · answered Aug 14 '22 at 18:46

import 'dart:async';
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bootstrap/flutter_bootstrap.dart';

/*
  TextEditingController txtname = TextEditingController();
          showModalBottomSheet(
            context: context,
            isScrollControlled: true,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            builder: (context) => SingleChildScrollView(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).padding.bottom),
              child: new AddItem(
                  tektk: 'Category',
                  tektd: 'Add',
                  txtname: txtname,
                  ismultik:false,
                  onPressed: () {}),
            ),
          );
    */
class AddItem extends StatelessWidget {
  const AddItem(
      {Key? key,
      required this.ismultik,
      required this.tektd,
      required this.tektk,
      required this.txtname,
      required this.onPressed})
      : super(key: key);
  final bool ismultik;
  final String tektk;
  final String tektd;
  final VoidCallback? onPressed;
  final TextEditingController txtname;
  @override
  Widget build(BuildContext context) {
    final MediaQueryData mediaQueryData = MediaQuery.of(context);
    bootstrapGridParameters(gutterSize: 10);
    return Padding(
      padding: mediaQueryData.viewInsets,
      child: Container(
        padding: EdgeInsets.only(bottom: 90.0, left: 10.0, right: 10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ListTile(
              trailing: SizedBox.fromSize(
                size: Size(35, 35),
                child: ClipOval(
                  child: Material(
                    color: Colors.indigo,
                    child: InkWell(
                      splashColor: Colors.white,
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.close, color: Colors.white),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            BootstrapRow(height: 0, children: [
              BootstrapCol(
                sizes: 'col-md-12',
                child: TextField(
                  style: TextStyle(color: Colors.black),
                  decoration: new InputDecoration(
                    border: new OutlineInputBorder(
                        borderSide: new BorderSide(color: Colors.white)),
                    labelText: tektk,
                  ),
                  keyboardType: ismultik == true
                      ? TextInputType.multiline
                      : TextInputType.text,
                  maxLines: null,
                  minLines: 1,
                  controller: txtname,
                ),
              ),
              BootstrapCol(
                sizes: 'col-md-12',
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.green, // background
                      onPrimary: Colors.white, // foreground
                    ),
                    onPressed: onPressed,
                    child: Text(tektd)),
              ),
            ]),
          ],
        ),
      ),
    );
  }
}

Bottom sheet covered by keyboard

4 Answers4