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 ça.

showModalBottomSheet(
        isScrollControlled: true,
        context: context,
        builder: (context) {
          return AnimatedPadding(
              padding: MediaQuery.of(context).viewInsets,
              duration: const Duration(milliseconds: 100),
              curve: Curves.decelerate,
              child: Container(
                  child: Wrap(
                children: [
                  TextField(
                    decoration: InputDecoration(labelText: "1"),
                  ),
                  TextField(
                    decoration: InputDecoration(labelText: "2"),
                  ),
                  TextField(
                    decoration: InputDecoration(labelText: "3"),
                  ),
                ],
              )));
        },
      )

Answer 2

Vous devriez l'utiliser alors,

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    shape: RoundedRectangleBorder(
      // <-- for border radius
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0),
      ),
    ),
    builder: (BuildContext context) {
      return SingleChildScrollView(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: drunkenWidget()...

//BTW, Never ever Drink

Answer 3

showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      context: context,
      isScrollControlled: true,
      builder: (builder) {
        return Container(
          height: MediaQuery.of(context).size.height - 40,
          padding: MediaQuery.of(context).viewInsets,
          child: <Your Widget Here>,
        );
      },
    );

Answer 4

Si vous êtes en plein écran ou en taille fixe showModalBottomSheet n'utilisez pas padding cela ne résoudra pas votre problème. Utilisez margin au lieu de padding comme ceci :

  showModalBottomSheet(
          context: context,
          builder: (context) {
            return Container(
                marign: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: TextField()
            );
          });

Answer 5

Au lieu d'utiliser builder: (BuildContext context) { } dans le constructeur, utilisez builder: (context) { }

Avec cette solution, ma feuille de fond modale se colle à la barre d'état (agit comme si Scaffold con resizeToAvoidBottomInset: false ) et permet d'afficher tous les champs du formulaire et de faire défiler le formulaire si cela est nécessaire pour afficher les champs de texte inférieurs.

Pour plus de détails, voici le lien d'où j'ai trouvé la solution- https://github.com/flutter/flutter/issues/18564#issuecomment-602604778