web-dev-qa-db-fra.com

Flutter TextFormField caché par le clavier

REMARQUE: Im utilisant Navigator.of (context) .Push to Push ModalRoute,

Salut, j'ai une page avec ModalRoute avec TextFormField dans le corps, mais lorsque le clavier apparaît, l'entrée est masquée par le clavier, comment résoudre ce problème?

enter image description here

return Container(
      child: ListView(
          children: <Widget>[
            //other widget
            SizedBox(height: _qtyAnimation.value),
            Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    "Jumlah",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                SizedBox(
                  width: 145.0,
                  child: TextFormField(
                    focusNode: _qtyFocusNode,
                    controller: qty,
                    keyboardType: TextInputType.number,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(0.0),
                      prefixIcon: IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: () {},
                      ),
                      border: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.grey, width: 0.1),
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () {},
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
    );

c'est mon code, j'essaye avec focusnode et plus, toujours le même résultat s'il vous plaît aidez-moi

14
RIFAL

merci de résoudre mon problème avec ce rembourrage en bas du champ de texte

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

et liste inversée de jument

1
RIFAL

Définissez resizeToAvoidBottomInset sur false dans votre widget Scaffold.

Notez que resizeToAvoidBottomPadding sera obsolète.

Scaffold( resizeToAvoidBottomInset: false, ...)
1
JunSik CHOI

Il existe peu de méthodes pour cela (maintenant):

Vous pouvez lire ceci pour une meilleure solution: Quand je sélectionne un champ de texte, le clavier se déplace dessus

À l'intérieur Scafold() ajoutez: resizeToAvoidBottomPadding: false,

Vous pouvez aussi faire,

Envelopper votre TextWidget avec SingleChildScrollView() . Cela vous donnera la flexibilité de faire défiler chaque fois que le clavier apparaît.

0
Blasanka

Ce qui a fonctionné pour moi, c'était de combiner les documents avec des conseils ici. Il utilise, LayoutBuilder, SingleChildScrollView, Padding (avec hack inférieur) et enfin, ConstrainedBox (pour utiliser Expanded). En les combinant, cela fonctionne avec les widgets étendus à l'intérieur des colonnes.

Les documents (d'où LayoutBuilder vient): https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Structure

 return Scaffold(
      resizeToAvoidBottomInset: false,
      resizeToAvoidBottomPadding: false,`
body: SafeArea(
        child: Container(
          child: LayoutBuilder(builder:
              (BuildContext context, BoxConstraints viewportConstraints) {
            return SingleChildScrollView(
              reverse: true,
              child: Padding(
                padding: EdgeInsets.only(bottom: bottom),
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                      minHeight: viewportConstraints.maxHeight,
                      maxHeight: viewportConstraints.maxHeight),
                  child: Column(
0
jacvalle