ShowModalBottomSheet containing Textfield gets hidden with keyboard following Flutter upgrade 2.2.0
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 :)
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, 2022Comments
-
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; }, ),