¿Cómo proporciono un valor inicial a un campo de texto?

142

Me gustaría proporcionar un valor inicial a un campo de texto y volver a dibujarlo con un valor vacío para borrar el texto. ¿Cuál es el mejor enfoque para hacer eso con las API de Flutter?

Seth Ladd
fuente

Respuestas:

105

(De la lista de correo. No se me ocurrió esta respuesta).

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
fuente
Supongo que los servidores insinúan el mismo propósito.
dhuma1981
3
Me pregunto a qué lista de correo se refería en la respuesta.
stt106
2
¿Y cómo agregamos / anulamos el valor del campo de texto en el valor inicial?
stuckedoverflow
2
Además, asegúrese de disponer _controller en la disposición del widget. Es recomendado por Google. Asegura que los recursos se liberen cuando no se necesiten.
Amrit Pal Singh
89

Puede usar un en TextFormFieldlugar de TextField, y usar la initialValuepropiedad. por ejemplo

TextFormField(initialValue: "I am smart")
Sami Kanafani
fuente
2
Por alguna razón no pude usar esto con un objeto dinámico. Terminé necesitando el controlador.
S1r-Lanzelot
66
Esto solo es válido cuando no se especifica un controlador con un TextFormField. docs.flutter.io/flutter/material/TextFormField/…
Alex Fallenstedt
@AlexFallenstedt no hay necesidad de esta propiedad cuando el controlador está disponible
Sami Kanafani
Creo que esto es arriesgado porque al reconstruir su árbol de widgets, su texto puede reemplazarse con un valor inicial.
Gökberk Yağcı
46

No tiene que definir una variable separada en el alcance del widget, solo hágalo en línea:

TextField(
  controller: TextEditingController()..text = 'Your initial value',
  onChanged: (text) => {},
)
vovahost
fuente
¿Qué se entiende por los puntos dobles en "TextEditingController () .. text"?
Ray Li
3
@ RayLi Se llama operador en cascada. Para obtener información y ejemplos, consulte aquí stackoverflow.com/questions/53136945/…
vovahost
1
¡Gracias!. Esto es perfecto para la creación dinámica de widgets de listas de objetos :)
davaus
Esto es lo que estaba buscando !! ¡Muchas gracias!
TaeJung Shim
1
@vovahost le falta la parte de eliminación, desafortunadamente.
Chris Rutkowski
28

Si está utilizando TextEditingController , configure el texto como se muestra a continuación

TextEditingController _controller = new TextEditingController();


_controller.text = 'your initial text';

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

y si no está utilizando ningún TextEditingController , puede usar directamente InitialValue como se muestra a continuación

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

Para más referencia TextEditingController

Nirav Bhavsar
fuente
No estoy seguro de si es una buena idea establecer el valor inicial de la textpropiedad según los documentos de la TextEditingController.textpropiedad: al configurar esto, se notificará a todos los oyentes de este TextEditingController que necesitan actualizar (llama a notifyListeners). Por esta razón, este valor solo debe establecerse entre cuadros, por ejemplo, en respuesta a las acciones del usuario, no durante las fases de construcción, diseño o pintura. ( api.flutter.dev/flutter/widgets/TextEditingController/text.html )
Kirill Karmazin
15

He visto muchas formas de hacer esto aquí. Sin embargo, creo que esto es un poco más eficiente o al menos conciso que las otras respuestas.

TextField(
   controller: TextEditingController(text: "Initial Text here"),
)
kent
fuente
7

Si desea manejar múltiples TextInputcorreos electrónicos según lo solicitado por @MRT en el comentario a la respuesta aceptada, puede crear una función que tome un valor inicial y devuelva un aspecto TextEditingControllercomo este:

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

Luego, configure esta función como el controlador para el TextInputy proporcione su valor inicial allí de esta manera:

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

Puede repetir esto para el otro TextInputs.

Muaad
fuente
4

Esto se puede lograr usando TextEditingController.

Para tener un valor inicial puedes agregar

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

o

Si está utilizando TextFormField, tiene una initialValuepropiedad allí. Lo que básicamente proporciona esto initialValueal controlador automáticamente.

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

Para borrar el texto puedes usar el _controller.clear()método.

Debasmita Sarkar
fuente
3

dentro de clase,

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

Campo de texto,

   child: new TextField(
        controller: usernameController,
    ...
)
Pérdida de sangre
fuente
3
TextEdittingController _controller = new TextEdittingController(text: "your Text");

o

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

Si no ha encontrado la respuesta para esto y para aquellos que vienen aquí buscando una respuesta: InputDecorationRevise la pista del campo Texto:

new TextField(
  decoration: new InputDecoration(
    hintText:"My Text String."
  ),
...
usuario693336
fuente
El texto de la sugerencia no es el valor inicial. Cuando el usuario escribe algo, desaparecería. El texto inicial es como escribir previamente algo para el usuario.
Arman Ordookhani
Este es el texto de Sugerencias, No inicializador de valor
MRT
2
Eso es cierto, pero esto es bueno para aquellos que llegan aquí en busca de texto indirecto, pero no saben cómo llamarlo.
ThinkDigital