Recuperar datos de TextFields en Flutter

En este artículo, aprenderemos cómo recuperar datos de TextFields. El widget TextField() es el widget más común que se usa en las aplicaciones flutter para tomar la entrada del usuario. Hablaremos de dos métodos principales utilizados para extraer texto de TextField.

Uso de variables:

El widget TextField tiene varias propiedades de devolución de llamada a través de las cuales podemos extraer texto. Principalmente, onChanged se usa ya que toma información sobre cada cambio incurrido en TextField . Esta devolución de llamada no funciona cuando el texto de TextField se cambia mediante programación. Básicamente, este tipo de cambio lo inicia la propia aplicación.

Syntax:
TextField(
   onChanged: (value) {
       print("The value entered is : $value");
   }
)

Varias otras devoluciones de llamada también están disponibles para TextFields como onTap, onSubmitted, onEditingComplete.

• onTap: se llama para cada toque único, excepto cada segundo toque de doble toque. Internamente, construye un GestureDetector para manejar este tipo de eventos. Puede usarlo siempre que desee activar alguna propiedad de TextField que se basa en gestos.
• onSubmitted: se llama cada vez que el usuario indica que ha terminado de editar el texto. Principalmente, cada vez que se presiona el botón Listo en el teclado, se llamará y se almacenarán los datos ingresados.
• onEditingComplete: Es muy similar a onSubmitted . La única diferencia es que se llama cada vez que se presiona el botón en la esquina inferior derecha del teclado. Puede ser ‘hecho’, ‘enviar’, ‘ir’ o ‘buscar’.

Ejemplo:

A continuación se muestra el ejemplo de onChanged en TextField . Aquí, hemos utilizado una función anónima para recibir una devolución de llamada de onChanged . El valor de la devolución de llamada se recibe en valor , luego lo pasamos a nuestro título de variable .

import "package:flutter/material.dart";
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}
 
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _HomeState createState() => _HomeState();
}
 
class _HomeState extends State<Home> {
// var to store
// onChanged callback
  late String title;
  String text = "No Value Entered";
 
  void _setText() {
    setState(() {
      text = title;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(15),
            child: TextField(
              decoration: const InputDecoration(labelText: 'Title'),
              onChanged: (value) => title = value,
            ),
          ),
          const SizedBox(
            height: 8,
          ),
 
          ElevatedButton(
              onPressed: _setText,
              style: ButtonStyle(
                  elevation: MaterialStateProperty.all(8),
                  backgroundColor: MaterialStateProperty.all(Colors.green)),
              child: const Text('Submit')),
          // RaisedButton is deprecated and should not be used
          // Use ElevatedButton instead
           
          // RaisedButton(
          //     onPressed: _setText,
          //     child: Text('Submit'),
          //     elevation: 8,
          // ),
          const SizedBox(
            height: 20,
          ),
          Text(text),
          // changes in text
          // are shown here
        ],
      ),
    );
  }
}

Producción

Usando el controlador:

Otra forma de recuperar texto es usando el controlador. Es una propiedad que flutter proporciona con TextField . A continuación se muestran los pasos que explican el uso del controlador.

• Primero, crea un objeto de la clase TextEditingController() . Es la clase predeterminada proporcionada por flutter.
• Conecte el objeto creado al controlador de TextField .
• Ahora, puede crear una función para obtener el último valor.

Funciona casi de la misma manera que onChanged . Pero, en ciertos escenarios, se prefiere usar el controlador ya que el motor flutter administra el proceso de recuperación.

Ejemplo:

El siguiente ejemplo explica el uso del controlador para recuperar valores de TextField . En primer lugar, cree un objeto del tipo TextEditingController . Luego asignamos este objeto a la propiedad del controlador de TextField .

import "package:flutter/material.dart";
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}
 
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _HomeState createState() => _HomeState();
}
 
class _HomeState extends State<Home> {
  final titleController = TextEditingController();
  String text = "No Value Entered";
 
  void _setText() {
    setState(() {
      text = titleController.text;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(15),
            child: TextField(
              decoration: const InputDecoration(labelText: 'Title'),
              controller: titleController,
            ),
          ),
          const SizedBox(
            height: 8,
          ),
          ElevatedButton(
              onPressed: _setText,
              style: ButtonStyle(
                  elevation: MaterialStateProperty.all(8),
                  backgroundColor: MaterialStateProperty.all(Colors.green)),
              child: const Text('Submit')),
 
          // RaisedButton is deprecated and should not be used
          // Use ElevatedButton instead
 
          // RaisedButton(
          //   onPressed: _setText,
          //   child: Text('Submit'),
          //   elevation: 8,
          // ),
          const SizedBox(
            height: 20,
          ),
          Text(text),
        ],
      ),
    );
  }
}

Producción

Ambos métodos se pueden utilizar para recuperar texto, ya que el resultado de ambos es el mismo. Aquí, tuvimos que volver a ejecutar el método de compilación para actualizar el texto, por lo tanto, usamos un widget con estado. Si en su programa solo desea almacenar el valor, también se puede usar un widget sin estado.