Gérer le Clavier qui Masque les Inputs en Bas d’Écran

Un problème courant en Flutter : un TextField (ou autre widget) placé en bas d’un BottomSheet ou d’un écran, qui se retrouve caché dès que le clavier virtuel apparaît.

J’ai récemment revu la solution standard et efficace pour ce cas précis, et je voulais la partager : l’utilisationde MediaQuery.of(context).viewInsets.bottom.

Le Principe :
MediaQuery.of(context).viewInsets.bottom retourne la hauteur de l’espace occupé par les éléments système qui s’affichent par-dessus votre UI en bas de l’écran (principalement le clavier).

Si le clavier est fermé, la valeur est 0.
Si le clavier est ouvert, elle correspond à sa hauteur.

L’Application :
Pour éviter que votre contenu soit masqué, ajoutez cette valeur au padding inférieur du widget parent concerné.

Résultat :
Lorsque le clavier s’affiche, le Padding s’agrandit dynamiquement, poussant ainsi le child (votre TextField, etc.) vers le haut pour qu’il reste visible.

aviez-vous mis en place d’autres stratégies pour contourner ce problème ? Partagez vos approches.