[Flutter] How to close keyboard of textfield and a showModalBottomSheet at once

I am trying to close the keyboard input from a textfield and a showModalBottomSheet, all in one action, just tapping the back button once (android, not tested in ios). The issue is my textfield needs to have the 'autofocus: true' for my needs, but when trying to close the keyboard and the showModalBottomSheet, only the keyboard will close and the user has to tap the backbutton again to close the showModalBottomSheet, which is so akward.

Tapping outside the showModalBottomSheet will do the trick, but I would also like to make it possible with the phone's back button.

My code:

If more code is needed, please let me know.

FloatingActionButton(
heroTag: null,
tooltip: 'Add a new task',
onPressed: () async {
showModalBottomSheet(
shape: const RoundedRectangleBorder(),
context: context,
isDismissible: true,
builder: (BuildContext context) {
return SingleChildScrollView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),
child: TextField(
controller: _newTaskTextController,
autofocus: true,
onSubmitted: (_) {
creatingNewTask();
},
),
),
),
IconButton(
onPressed: () {
creatingNewTask();
},
icon: const Icon(Icons.done),
),
],
),
);
},
);
},
child: const Icon(Icons.add),
),


I've tried using WillPopScope wrapping the Scaffold, the FloatingActionButton, even the TextField, but willPop NEVER triggers on the first back button tap, since is closing the keyboard, it will only trigger on the second tap (when the keyboard is closed).

I expect to close the showModalBottomSheet dialog and the focused keyboard just tapping the backbutton once.

Continue reading...