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?

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'),
        ),
      ],
    );
  }
}

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")

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) => {},
)

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


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"),
)

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.


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


3

dentro da classe,

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

Campo de texto,

   child: new TextField(
        controller: usernameController,
    ...
)

3
TextEdittingController _controller = new TextEdittingController(text: "your Text");

ou

@override
  void initState() {
    super.initState();
    _Controller.text = "Your Text";
    }

-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."
  ),
...

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.