Lorsque le clavier apparaît, les widgets de Flutter se redimensionnent. Comment éviter cela ?

Question

J'ai une colonne de widgets étendus comme ceci :

 return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            flex: 1,
            child: convertFrom,
          ),
          new Expanded(
            flex: 1,
            child: convertTo,
          ),
          new Expanded(
            flex: 1,
            child: description,
          ),
        ],
      ),
    );

Ça ressemble à ça :

convertFrom comprend un champ de texte. Lorsque je tape sur ce champ de texte, le clavier Android apparaît à l'écran. Cela modifie la taille de l'écran, de sorte que les widgets se redimensionnent comme ceci :

Existe-t-il un moyen de faire en sorte que le clavier "recouvre" l'écran afin que ma colonne ne soit pas redimensionnée ? Si je n'utilise pas Expanded et coder en dur une hauteur pour chaque widget, les widgets ne se redimensionnent pas, mais j'obtiens l'erreur de la bande noire et jaune lorsque le clavier apparaît (parce qu'il n'y a pas assez d'espace). Cette méthode n'est pas non plus flexible pour toutes les tailles d'écran.

Je ne suis pas sûr que ce soit spécifique à Android ou à Flutter.

Answer 1

Réponse actualisée

resizeToAvoidBottomPadding est maintenant déprécié .

La solution mise à jour consiste à définir resizeToAvoidBottomInset à la propriété false .

---

Réponse originale

Dans votre Scaffold ensemble resizeToAvoidBottomPadding à la propriété false .

Answer 2

La plupart des autres réponses suggèrent d'utiliser resizeToAvoidBottomPadding=false . D'après mon expérience, cela permet au clavier de couvrir les champs de texte s'ils se trouvent en dessous de l'endroit où le clavier apparaîtrait.

Ma solution actuelle consiste à forcer ma colonne à être de la même hauteur que l'écran, puis à la placer dans un fichier SingleChildScrollView pour que Flutter fasse automatiquement défiler mon écran vers le haut juste assez quand le clavier est utilisé.

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              // CONTENT HERE
            ],
          ),
        ),
      ),
    ),
  );
}

J'utilise NeverScrollableScrollPhysics afin que l'utilisateur ne puisse pas se déplacer tout seul.

Answer 3

Définir resizeToAvoidBottomInset à false au lieu de resizeToAvoidBottomPadding qui est déprécié.

    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    );

Answer 4

Mon approche consiste à utiliser SingleChildScrollView avec le ClampingScrollPhysics physique.

SingleChildScrollView(
  physics: ClampingScrollPhysics(),
  child: Container(),
)

Answer 5

Ma suggestion est d'utiliser resizeToAvoidBottomInset: false de toute façon pour empêcher les widgets de se redimensionner si le clavier apparaît soudainement à l'écran. Par exemple, si un utilisateur utilise les têtes de chat de Facebook alors qu'il se trouve dans votre application.

Pour empêcher le clavier de recouvrir les widgets, sur les écrans où vous en avez besoin, je suggère l'approche suivante, où est la hauteur de SingleChildScrollView réduit à la hauteur de l'espace disponible. Dans ce cas, SingleChildScrollView fait également défiler les pages vers le widget concerné.

final double screenHeight = MediaQuery.of(context).size.height;
final double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
  resizeToAvoidBottomInset: false,
  body: SizedBox(
    height: screenHeight - keyboardHeight,
    child: SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 200),
          for (var i = 0; i < 10; i++) const TextField()
        ],
      ),
    ),
  ),
);