¿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?

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

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

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

¿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


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

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.


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.


3

dentro de clase,

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

Campo de texto,

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

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

o

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

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

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.