ShowModalBottomSheet containing Textfield gets hidden with keyboard following Flutter upgrade 2.2.0

1,058

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

Share:
1,058
SylvainJack
Author by

SylvainJack

I have worked as a teacher for about 25 years and decided I wanted to embrace a new career. I started learning Flutter / Dart in January 2020. I know it will be a long way to be able to develop apps on my own, but I want to prove that I can do it!

Updated on December 29, 2022

Comments

  • SylvainJack
    SylvainJack over 1 year

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