CODEWITHSUNDEEP
flutterkeyboardtextfieldflutter-showmodalbottomsheet
SylvainJack
SylvainJack

Reputation: 1257

ShowModalBottomSheet containing Textfield gets hidden with keyboard following Flutter upgrade 2.2.0

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

Upvotes: 9

Views: 11454

Answers (4)

Diwakar Tiwari
Diwakar Tiwari

Reputation: 11

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

Upvotes: 1

Filipe Ferreira
Filipe Ferreira

Reputation: 101

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

Upvotes: 10

SylvainJack
SylvainJack

Reputation: 1257

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

Upvotes: 20

CbL
CbL

Reputation: 824

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

Upvotes: 4

Related Questions