Comment déplacer la feuille de bas de page avec le clavier qui a un champ de texte (autofocused est vrai) ?

Question

J'essaie de créer une feuille de bas de page avec un champ de texte et l'autofocus est réglé sur true pour que le clavier apparaisse. Mais la feuille de bas de page est recouverte par le clavier. Existe-t-il un moyen de déplacer la feuille de fond au-dessus du clavier ?

Padding(
  padding:
      EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: Column(children: <Widget>[
    TextField(
      autofocus: true,
      decoration: InputDecoration(hintText: 'Title'),
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Additional details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),]);

Answer 1

Essayez ceci

Ma solution est

• Utilice isScrollControlled: true

• Ajouter un rembourrage

  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)

• Enveloppez votre mise en page dans SingleChildScrollView

CODE ÉCHANTILLON

Future<void> future = showModalBottomSheet(
  context: context,
  isDismissible: true,
  isScrollControlled: true,
  backgroundColor: Colors.white.withOpacity(0.2),
  builder: (context) => SingleChildScrollView(
    child: GestureDetector(
      child: Padding(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom
        ),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: <Widget>[
              // add your widget here
            ],
          ),
        ),
      )
    ),
  )
);

Answer 2

Je l'ai résolu en augmentant la hauteur du widget enfant lorsque le clavier est ouvert. La valeur initiale de MediaQuery.of(context).viewInsets.bottom sera de 0 ; elle changera lorsque le clavier sera focalisé.

showModalBottomSheet<void>(
      enableDrag: true,
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return Card(
          color: Colors.white,
          child: Container(
            height: MediaQuery.of(context).size.height / 2 +
                MediaQuery.of(context).viewInsets.bottom,
            child: Column(
              children: <Widget>[
                TextField(),
                TextField(),
              ],
            ),
          ),
        );
      },
    );

Answer 3

Pour les personnes qui ne peuvent pas résoudre leur problème en essayant toutes les réponses. Ces réponses sont correctes mais pas si claires.

Lorsque vous utilisez

MediaQuery.of(context).viewInsets.bottom)

assurez-vous que votre variable contextuelle utilise celle fournie par la propriété bottom sheet builder.

builder :(**c**)=>MediaQuery.of(**c**)

Answer 4

MISE À JOUR 2021 Mai flutter 2.2 ! Maintenant, vous devez donner du rembourrage au fond. Ce qui est écrit ci-dessous est un bug.

MISE À JOUR 2020 !

Ce site réponse est vrai, mais vous n'avez pas besoin de donner du rembourrage au fond maintenant ! Trouvez et supprimez cette ligne :

padding: MediaQuery.of(context).viewInsets

Answer 5

Ajoutez ceci après le dernier widget de votre feuille de fond

Padding(padding: EdgeInsets.only(bottom:MediaQuery.of(context).viewInsets.bottom))