ShowModalBottomSheet containing Textfield gets hidden with keyboard following Flutter upgrade 2.2.0

user_15349168 0
Viewed 3179

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;
                                    },
                                  ),
flutter-showmodalbottomsheet flutter textfield keyboard
3 Answers

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 :)

user_153491680

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: ...,
              )
            );
          }
        );
      });
user_177045920

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