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

La meilleure solution pour éviter de redimensionner les widgets et aussi mettre l'accent sur le champ de texte est d'utiliser SingleChildScrollView() avec ClampingScrollPhysics() physique. N'oubliez pas non plus de hauteur déterminée pour son enfant (ex : utiliser container() ), de sorte que vous pouvez utiliser vos widgets par l'intermédiaire de Column() :

return Scaffold(
   body: SingleChildScrollView(
      physics: ClampingScrollPhysics(),
      child: Container(
         height: size.height,
         child: Column(
            children:[
               TextFormField()
            ],
         ),
      ),
   ),
);

Answer 2

Il est peut-être trop tard pour répondre, mais ce qui suit a fonctionné pour moi.

Scaffold(
  body: SingleChildScrollView(
    physics: ClampingScrollPhysics(parent: NeverScrollableScrollPhysics()),
      child: Container(

Clamping permet le défilement automatique pour rendre le champ de texte visible, son parent NeverScrollable ne permet pas à l'utilisateur de défiler.

Answer 3

Méthode 1 : Retirer android:windowSoftInputMode="adjustResize" du fichier AndroidManifest.xml (sinon il écrasera le code de Flutter) et ajoutez resizeToAvoidBottomPadding: false dans Scaffold comme ci-dessous :

Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar()
)

Méthode 2 (non recommandée) : Ajoutez simplement android:windowSoftInputMode="stateVisible" dans Android AndroidManifest.xml dans l'activité il ne fonctionnera que pour Android et pas pour IOS comme.

<activity
       ...
        android:windowSoftInputMode="stateVisible">

Note : Ne le réglez pas sur android:windowSoftInputMode="adjustResize"

Answer 4

Réglage de la valeur false pour resizeToAvoidBottomInset a bien fonctionné pour moi.

Aussi, resizeToAvoidBottomPadding a bien fonctionné pour moi. Vous pouvez utiliser l'un ou l'autre.

Answer 5

Je pense que si nous mettons en œuvre la solution de @Aman, notre application se comportera de manière hideuse car lorsque le clavier apparaîtra, il n'ajustera pas la fenêtre de l'écran en fonction de la hauteur disponible et les autres champs seront cachés derrière le clavier. Je suggère donc d'utiliser SingleChildScrollView à la place.

Enveloppez votre code avec SingleChildScrollView comme indiqué ci-dessous,

 return new Container(
  child: SingleChildScrollView(
    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,
      ),
    ],
  ),
 ),
);