Comment fournir une valeur initiale à un champ de texte?

144

Je voudrais fournir une valeur initiale à un champ de texte et le redessiner avec une valeur vide pour effacer le texte. Quelle est la meilleure approche pour y parvenir avec les API de Flutter?

Seth Ladd
la source

Réponses:

105

(À partir de la liste de diffusion. Je n'ai pas trouvé cette réponse.)

class _FooState extends State<Foo> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new TextEditingController(text: 'Initial value');
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextField(
          // The TextField is first built, the controller has some initial text,
          // which the TextField shows. As the user edits, the text property of
          // the controller is updated.
          controller: _controller,
        ),
        new RaisedButton(
          onPressed: () {
            // You can also use the controller to manipuate what is shown in the
            // text field. For example, the clear() method removes all the text
            // from the text field.
            _controller.clear();
          },
          child: new Text('CLEAR'),
        ),
      ],
    );
  }
}
Seth Ladd
la source
Je suppose que les serveurs ont le même but.
dhuma1981
3
Vous vous demandez simplement à quelle liste de diffusion vous êtes-vous référé dans la réponse?
stt106
2
Et comment ajouter / remplacer la valeur du champ de texte dans la valeur initiale?
stuckedoverflow
2
Assurez-vous également de disposer de _controller sur la disposition du widget. Il est recommandé par Google. Il garantit que les ressources sont libérées lorsqu'elles ne sont pas nécessaires.
Amrit Pal Singh
89

Vous pouvez utiliser un TextFormFieldau lieu de TextFieldet utiliser la initialValuepropriété. par exemple

TextFormField(initialValue: "I am smart")
Sami Kanafani
la source
2
Pour une raison quelconque, je ne pouvais pas l'utiliser avec un objet dynamique. J'ai fini par avoir besoin du contrôleur.
S1r-Lanzelot
6
Ceci n'est valide que lorsqu'un contrôleur n'est pas spécifié avec un TextFormField. docs.flutter.io/flutter/material/TextFormField/…
Alex Fallenstedt
@AlexFallenstedt, cette propriété n'est pas nécessaire lorsque le contrôleur est disponible
Sami Kanafani
Je pense que c'est risqué car lors de la reconstruction de votre arborescence de widgets, votre texte peut être remplacé par la valeur initiale.
Gökberk Yağcı
48

Vous n'avez pas besoin de définir une variable distincte dans la portée du widget, faites-le simplement en ligne:

TextField(
  controller: TextEditingController()..text = 'Your initial value',
  onChanged: (text) => {},
)
vovahost
la source
Que signifient les doubles points dans "TextEditingController () .. text"?
Ray Li
3
@RayLi C'est ce qu'on appelle l'opérateur en cascade. Pour plus d'informations et un exemple, consultez ici stackoverflow.com/questions/53136945/…
vovahost
1
Merci!. Ceci est parfait pour la création dynamique de widgets à partir de listes d'objets :)
davaus
C'est ce que je cherchais !! Merci beaucoup!
TaeJung Shim
1
@vovahost, il manque malheureusement la partie à éliminer.
Chris Rutkowski
28

Si vous utilisez TextEditingController, définissez-y le texte, comme ci-dessous

TextEditingController _controller = new TextEditingController();


_controller.text = 'your initial text';

final your_text_name = TextFormField(
      autofocus: false,
      controller: _controller,
      decoration: InputDecoration(
        hintText: 'Hint Value',
      ),
    );

et si vous n'utilisez aucun TextEditingController, vous pouvez utiliser directement initialValue comme ci-dessous

final last_name = TextFormField(
      autofocus: false,
      initialValue: 'your initial text',
      decoration: InputDecoration(
        hintText: 'Last Name',
      ),
    );

Pour plus de références TextEditingController

Nirav Bhavsar
la source
Je ne suis pas sûr que ce soit une bonne idée de définir la valeur initiale de la textpropriété selon la documentation de la TextEditingController.textpropriété: définir cela informera tous les écouteurs de ce TextEditingController qu'ils doivent mettre à jour (cela appelle notifyListeners). Pour cette raison, cette valeur ne doit être définie qu'entre les cadres, par exemple en réponse aux actions de l'utilisateur, et non pendant les phases de construction, de mise en page ou de peinture. ( api.flutter.dev/flutter/widgets/TextEditingController/text.html )
Kirill Karmazin
16

J'ai vu de nombreuses façons de le faire ici. Cependant, je pense que c'est un peu plus efficace ou du moins concis que les autres réponses.

TextField(
   controller: TextEditingController(text: "Initial Text here"),
)
Kent
la source
7

Si vous souhaitez gérer plusieurs TextInputs comme demandé par @MRT dans le commentaire de la réponse acceptée, vous pouvez créer une fonction qui prend une valeur initiale et renvoie un TextEditingControllercomme ceci:

initialValue(val) {
  return TextEditingController(text: val);
}

Ensuite, définissez cette fonction comme contrôleur pour le TextInputet indiquez sa valeur initiale comme ceci:

controller: initialValue('Some initial value here....')

Vous pouvez répéter ceci pour les autres TextInputs.

Muaad
la source
5

Ceci peut être réalisé en utilisant TextEditingController.

Pour avoir une valeur initiale, vous pouvez ajouter

TextEditingController _controller = TextEditingController(text: 'initial value');

ou

Si vous utilisez, TextFormFieldvous avez une initialValuepropriété là-bas. Ce qui fournit essentiellement cela initialValueau contrôleur automatiquement.

TextEditingController _controller = TextEditingController();
TextFormField(
  controller: _controller,
  initialValue: 'initial value'
)

Pour effacer le texte, vous pouvez utiliser la _controller.clear()méthode.

Debasmita Sarkar
la source
3

en classe,

  final usernameController = TextEditingController(text: 'bhanuka');

Champ de texte,

   child: new TextField(
        controller: usernameController,
    ...
)
Perte de sang
la source
3
TextEdittingController _controller = new TextEdittingController(text: "your Text");

ou

@override
  void initState() {
    super.initState();
    _Controller.text = "Your Text";
    }
Seyed Ali Aghamali
la source
-12

Si vous n'avez pas trouvé la réponse pour cela et pour ceux qui viennent ici à la recherche d'une réponse: InputDecorationConsultez l'indice du champTexte:

new TextField(
  decoration: new InputDecoration(
    hintText:"My Text String."
  ),
...
user693336
la source
Le texte d'indication n'est pas la valeur initiale. Lorsque l'utilisateur tape quelque chose, il disparaît. Le texte initial est comme pré-écrire quelque chose pour l'utilisateur.
Arman Ordookhani
Ceci est le texte Hints, Not Value initialiser
MRT
2
C'est vrai, mais c'est bien pour ceux qui arrivent ici à la recherche d'un texte d'indice, mais ne savent pas comment l'appeler.
ThinkDigital