ShowModalBottomSheet containing Textfield gets hidden with keyboard following Flutter upgrade 2.2.0

Question

In my app, when user clicks on FAB, it triggers a ModalBottomSheet which contains a textfield. Up until today (when I updated to flutter 2.2.0), the code below worked fine : when user tapped the textfield, the BottomSheet moved up and we could use the keyboard fine. Now, when we tap the textfield, the keyboard hides the BottomSheet.

Has there been a change with the update ?

Here is the code :

floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue[800],
          child: Icon(Icons.add),
          onPressed: () {
            showModalBottomSheet<void>(
              isScrollControlled: true,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 250,
                  child: Center(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(26.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(top: 8.0),
                                child: Text(
                                  'Ajouter une liste au carnet',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Colors.blue[800],
                                    fontSize: 22.0,
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 30,
                              ),
                              Column(
                                children: [
                                  TextFormField(
                                    keyboardType: TextInputType.emailAddress,
                                    decoration: InputDecoration(
                                        focusColor: Colors.blue,
                                        border: OutlineInputBorder(
                                          borderRadius:
                                              BorderRadius.circular(10.0),
                                        ),
                                        labelText:
                                            'Titre de la nouvelle liste'),
                                    onChanged: (value) {
                                      titre = value;
                                    },
                                  ),

Correct answer in Flutter 3: https://stackoverflow.com/a/76219183/11626514 — Julio Cesar Reis, May 10 '23 at 13:49

score 16 · Accepted Answer · answered May 21 '21 at 08:37

16

I found a way to solve this : I added SingleChildScrollView as the first Child to ModalBottomSheet and added the padding element given by "CbL" directly there and not to the container.

 return SingleChildScrollView(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom),
                  child: Container(
                    height: 250,

Thanks CbL for your help :)

answered May 21 '21 at 08:37

SylvainJack

1,007
1
8
27

This behavior changed in Flutter 3.7 with [this commit](https://github.com/flutter/flutter/pull/106542). It should no longer be necessary to add padding below the keyboard. – jon Mar 27 '23 at 16:53

Filipe Ferreira · Answer 2 · 2022-01-15T14:39:28.083

I solved this problem using a LayoutBuilder and AnimatedPadding. because LayoutBuilder make update the MediaQuery.of(context).viewInsets.bottom(using your context) when keyboard rise up

Exemple:

  showModalBottomSheet(
      context: context,
      isScrollControlled:true,
      isDismissible: true,  
      builder: (_) {
        return LayoutBuilder(
          builder: (context, _) { //<----- very important use this context
            return AnimatedPadding(
              padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
              duration: Duration(milliseconds: 150),
              curve: Curves.easeOut,
              child: Container(
                constraints: BoxConstraints(
                  maxHeight: 500,
                  minHeight: 150
                ),
                child: ...,
              )
            );
          }
        );
      });

I'm trying this but it's not working. Flutter 3.3.10 – Luke Irvin Mar 03 '23 at 17:40 — Luke Irvin, Mar 03 '23 at 17:40

score 4 · Answer 3 · answered May 21 '21 at 08:13

4

You can add the bottom view insets to the bottom of the bottom sheet which add the keyboard height to the padding avoiding hide of keyboard.

eg.

return Container(
       padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
       height: 250,
       child: Center(...

answered May 21 '21 at 08:13

CbL

734
5
22

1

Unfortunately it doesn't work and I get "A renderFlex overflowed by 117 piwels on the bottom". I sure am puzzled on why this screen has worked for weeks and now it no longer does... – SylvainJack May 21 '21 at 08:17
im not sure if you are testing your existing code on the same device. just peek the code, to me, this is having quite high probability to be overflow on some small screen size phone. just recommend you to add SingleChildScrollView to the outter most Column in order to avoid the keyboard hiding things – CbL May 21 '21 at 08:21
Yes am testing on the same device. Samsung A21S. It's the only one I have ;) The SingleChildScrollView solved the overflow problem. But my BottomSheet still gets hidden... I really believe it has something to do with the Flutter upgrade, as it all worked fine last night... haven't touched the code in weeks... and after upgrade, it no longer works... It seems to have gone back to old problems. I see a lot of 2 or 3 year-old posts mentioning the same problem... – SylvainJack May 21 '21 at 08:24

score 0 · Answer 4 · edited May 30 '23 at 11:01

CommonBottonSheet({required Widget childView,required BuildContext context}){
  showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(25.0),
      ),
    ),
    backgroundColor: AppColors.backGroundColor,
    builder: (BuildContext context) {
      return StatefulBuilder(
        builder: (BuildContext context, setState) {
          setState(() {});
          return Padding(
            padding:  EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: ListView(
              shrinkWrap: true,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    InkWell(
                      child: Container(
                        width: 100,
                        height: 5,
                        color: AppColors.yallow,
                      ),
                      onTap: (){
                        Navigator.of(context).pop();
                      },
                    )
                  ],
                ),
                childView
              ],
            ),
          );
        },
      );
    },
  );
}

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, May 30 '23 at 11:01

ShowModalBottomSheet containing Textfield gets hidden with keyboard following Flutter upgrade 2.2.0

4 Answers4