Comment masquer le clavier d'entrée souple sur Flutter après avoir cliqué en dehors du TextField/n'importe où sur l'écran ?

Question

Actuellement, je connais la méthode pour masquer le clavier virtuel en utilisant ce code, par les méthodes onTap de n'importe quel widget.

FocusScope.of(context).requestFocus(new FocusNode());

Mais je veux masquer le clavier virtuel en cliquant en dehors du TextField ou n'importe où sur l'écran. Y a-t-il une méthode en flutter pour faire cela?

Answer 1

Vous le faites d'une mauvaise manière, essayez simplement cette méthode simple pour masquer le clavier virtuel. Vous devez simplement envelopper tout votre écran dans la méthode GestureDetector et dans la méthode onTap écrire ce code.

        FocusScope.of(context).requestFocus(new FocusNode());

Voici un exemple complet:

new Scaffold(

body: new GestureDetector(
  onTap: () {

    FocusScope.of(context).requestFocus(new FocusNode());
  },
child: new Container(
   //reste de votre code écrit ici
    )
 )

Mis à jour (mai 2021)

return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Body(),
      ),
    );

Cela fonctionnera même lorsque vous touchez la AppBar, new est optionnel en Dart 2. FocusManager.instance.primaryFocus renverra le nœud qui a actuellement le focus principal dans l'arborescence des widgets.

Accès conditionnel en Dart avec la null-safety

Answer 2

Updated

À partir de mai 2019, FocusNode dispose désormais de la méthode unfocus :

Annule toutes les demandes de mise au premier plan en attente.

Cette méthode est sûre à appeler peu importe si ce noeud a déjà demandé le focus.

Utilisez unfocus si vous avez déclaré un FocusNode pour vos champs de texte :

final focusNode = FocusNode();

// ...

focusNode.unfocus();

Ma réponse originale suggérait d'utiliser la méthode detach - utilisez-la uniquement si vous devez vous débarrasser complètement de votre FocusNode. Si vous prévoyez de le conserver - utilisez plutôt unfocus.

Si vous n'avez pas spécifiquement déclaré un FocusNode - utilisez unfocus pour le FocusScope de votre contexte actuel :

FocusScope.of(context).unfocus();

---

Voir l'historique des révisions pour la réponse originale.

Answer 3

Enveloppez tout l'écran dans GestureDetector comme

new Scaffold(

  body: new GestureDetector(
      onTap: () {
        // appeler cette méthode ici pour masquer le clavier virtuel
        FocusScope.of(context).requestFocus(new FocusNode());
      },
    child: new Container(
       -
       -
       -
        )
   )

Answer 4

J'ai ajouté cette ligne

behavior: HitTestBehavior.opaque,

au GestureDetector et il semble maintenant fonctionner comme prévu.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).calculatorAdvancedStageTitle),
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: Padding(
          padding: const EdgeInsets.only(
            left: 14,
            top: 8,
            right: 14,
            bottom: 8,
          ),
          child: Text('Travail'),
        ),
      )
    );
  }

Answer 5

Juste une petite remarque:

Si vous utilisez ListView, sa propriété keyboardDismissBehavior pourrait vous intéresser :

ListView(
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
  children: [],
)