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

Après avoir combiné différentes solutions, j'ai obtenu ceci :

si vous ne voulez pas que ce soit Plein écran et ne veulent pas utiliser le Rembourrage utilisation de la solution de contournement

  showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      enableDrag: true,
      isDismissible: true,
      useRootNavigator: true,
      builder: (BuildContext ctx) {
        return Scaffold( // use CupertinoPageScaffold for iOS
          backgroundColor: Colors.transparent,
          resizeToAvoidBottomInset: true, // important
          body: SingleChildScrollView(
            child: Form(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    TextFormField(),
                    TextFormField(),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

sur Flutter (Channel master, v1.15.3-pre.37, sur Mac OS X 10.15.2 19C57, locale en-US)

Answer 2

Enveloppez le Form avec un Scaffold puis d'envelopper le widget TextFormField avec un SingleChildScrollView :

 return Container(
          height: screenHeight * .66,
          child: Scaffold(
             body: Form(
               key: _form,
               child: SingleChildScrollView(
                 child:TextFormField()
               )
              )
             )
           )

Answer 3

Comptez sur github

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

Answer 4

Si vous n'avez toujours pas trouvé votre problème. Alors je pense que vous avez manqué dans votre BuilderContext . Parfois, lorsque vous implémentez modalBottomSheet, cela ne vous donnera que la fonction contexte paramètre. Ajoutez donc le contexte avec BuildContext.

 builder: (BuildContext context) {  //-Here is your issue add BuilderContext class name as it as 
          return Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                child: new Container(

Answer 5

showModalBottomSheet(
 isScrollControlled: true,
 builder: (BuildContext context) {

    return SingleChildScrollView(
      child: Container(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: Padding(
          padding: const EdgeInsets.all(15.0), // content padding
          child: Container())});

Note : Cette ligne fait toute la magie