Como forneço um valor inicial para um campo de texto?

142

Gostaria de fornecer um valor inicial para um campo de texto e redesenhá-lo com um valor vazio para limpar o texto. Qual é a melhor abordagem para fazer isso com as APIs do Flutter?

Seth Ladd
fonte

Respostas:

105

(Na lista de discussão. Não encontrei esta resposta.)

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
fonte
Eu acho que os servidores de dicas têm o mesmo objetivo.
precisa saber é o seguinte
3
Basta saber a qual lista de correspondência você se referiu na resposta?
Stt106
2
E como anexamos / substituímos o valor do campo de texto no valor inicial?
stuckedoverflow
2
Além disso, certifique-se de dispor de _controller na disposição do widget. É recomendado pelo Google. Ele garante que os recursos sejam liberados quando não forem necessários.
Amrit Pal Singh
89

Você pode usar um em TextFormFieldvez de TextFielde usar a initialValuepropriedade por exemplo

TextFormField(initialValue: "I am smart")
Sami Kanafani
fonte
2
Por alguma razão, eu não poderia usar isso com um objeto dinâmico. Acabou precisando do controlador.
S1r-Lanzelot 19/01/19
6
Isso é válido apenas quando um controlador não é especificado com um TextFormField. docs.flutter.io/flutter/material/TextFormField/…
Alex Fallenstedt
@AlexFallenstedt não há necessidade para essa propriedade quando o controlador está disponível
Sami Kanafani
Eu acho que isso é arriscado, porque ao reconstruir sua árvore de widgets, seu texto pode ser substituído pelo valor inicial.
Gökberk Yağcı 01/12/19
46

Você não precisa definir uma variável separada no escopo do widget, apenas faça isso em linha:

TextField(
  controller: TextEditingController()..text = 'Your initial value',
  onChanged: (text) => {},
)
vovahost
fonte
O que significam os pontos duplos em "TextEditingController () .. text"?
Ray Li
3
@RayLi É chamado de operador em cascata. Para obter informações e exemplo, verifique aqui stackoverflow.com/questions/53136945/…
vovahost
1
Obrigado!. Esta perfeito para a criação dinâmica de elementos a partir de listas de objetos :)
davaus
Era isso que eu estava procurando !! Muito obrigado!
TaeJung Shim
1
@vovahost está faltando a parte de descarte, infelizmente.
Chris Rutkowski
28

Se você estiver usando o TextEditingController , defina o texto para ele, como abaixo

TextEditingController _controller = new TextEditingController();


_controller.text = 'your initial text';

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

e se você não estiver usando nenhum TextEditingController , poderá usar diretamente o valor inicial, como abaixo

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

Para mais referência: TextEditingController

Nirav Bhavsar
fonte
Eu não tenho certeza se é uma boa idéia para definir o valor inicial para a textpropriedade como por docs de TextEditingController.textpropriedade: Definir este irá notificar todos os ouvintes desta TextEditingController que precisam de atualização (que chama notifyListeners). Por esse motivo, esse valor deve ser definido apenas entre os quadros, por exemplo, em resposta às ações do usuário, não durante as fases de construção, layout ou pintura. ( api.flutter.dev/flutter/widgets/TextEditingController/text.html )
Kirill Karmazin
15

Eu já vi muitas maneiras de fazer isso aqui. No entanto, acho que isso é um pouco mais eficiente ou pelo menos conciso do que as outras respostas.

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

Se você deseja manipular vários TextInputs, conforme solicitado por @MRT no comentário da resposta aceita, você pode criar uma função que use um valor inicial e retorne TextEditingControllerassim:

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

Em seguida, defina esta função como controlador para TextInpute forneça seu valor inicial como este:

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

Você pode repetir isso para os outros TextInputs.

Muaad
fonte
4

Isso pode ser alcançado usando TextEditingController.

Para ter um valor inicial, você pode adicionar

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

ou

Se você estiver usando, TextFormFieldvocê tem uma initialValuepropriedade lá. O que basicamente fornece isso initialValueao controlador automaticamente.

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

Para limpar o texto, você pode usar o _controller.clear()método

Debasmita Sarkar
fonte
3

dentro da classe,

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

Campo de texto,

   child: new TextField(
        controller: usernameController,
    ...
)
Perda de sangue
fonte
3
TextEdittingController _controller = new TextEdittingController(text: "your Text");

ou

@override
  void initState() {
    super.initState();
    _Controller.text = "Your Text";
    }
seyed ali Aghamali
fonte
-12

Se você não encontrou a resposta para isso e para os que vêm aqui procurando uma resposta: InputDecorationConfira a dica do campo

new TextField(
  decoration: new InputDecoration(
    hintText:"My Text String."
  ),
...
user693336
fonte
O texto da dica não é o valor inicial. Quando o usuário digita algo, ele desaparece. O texto inicial é como pré-escrever algo para o usuário.
Arman Ordookhani 9/0318
Este é o Sugestões do texto, não o valor initialiser
MRT
2
Isso é verdade, mas isso é bom para quem chega aqui procurando um texto de dica, mas não sabe como chamá-lo.
ThinkDigital