Borrar campo de texto en Flutter

TextField y TextFormField son los dos widgets más comunes para obtener información del usuario. Se pueden usar para hacer formularios, páginas de inicio de sesión, etc. Para que su implementación sea efectiva y precisa, necesitamos agregar ciertas funcionalidades. En este artículo, aprenderemos cómo borrar TextField en ciertas acciones.

Puede haber ciertos escenarios en su aplicación, en los que es posible que necesite campos de texto claros. Supongamos que está creando un formulario y, después de enviarlo, se le redirige a una nueva página. Si regresa ahora, el texto ingresado aún estaría allí y esto no es una señal de una buena interfaz de usuario. Entonces, en este escenario, se le pedirá que borre el TextField después de enviarlo. 

Usando un botón para borrar TextField:

Paso 1: Cree un nuevo proyecto e inicie el archivo main.dart . Borrar el código existente.

Paso 2: importar el archivo material.dart

import 'package:flutter/material.dart';

Paso 3: Cree el método principal que llamará al método runApp() y pase el nombre de su clase a este método.

void main() => runApp(MyApp());

Paso 4: Cree la clase raíz MyApp() que extiende el widget sin estado y agregue el widget TextField como elemento secundario.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
        ),
        body: Center(
          child: TextField()
        )
      )
    );
  }
}      

Paso 5: cree una variable final de tipo TextEditingController() . Esta variable se usa para acceder a varias propiedades y métodos de TextField.

 final fieldText = TextEditingController();

Paso 6: Crea una función clearText(). Puede nombrarlo en consecuencia. Dentro de esta función agregue fieldText.clear(); 

Como se mencionó anteriormente, hay varias propiedades de TextEditingController(). Uno de ellos es clear(), y lo usaremos para borrar TextField .

void clearText() {
    fieldText.clear();
  }

Paso 7: cree un botón y vincúlelo al método clearText() que creamos en el paso anterior. Ahora, cada vez que presione este botón , TextField se borrará.

Ejemplo: 

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  final fieldText = TextEditingController();
 
  MyApp({Key? key}) : super(key: key);
 
  void clearText() {
    fieldText.clear();
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Use SizedBox for whitesapce
              SizedBox(
                width: 250,
                child: TextField(
                  decoration: const InputDecoration(
                    hintText: 'Enter Something',
                    focusColor: Colors.green,
                  ),
                  controller: fieldText,
                ),
              ),
              const SizedBox(
                height: 15,
              ),
              ElevatedButton(
                onPressed: clearText,
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.green)),
                child: const Text('Clear'),
              ),
 
              // RaisedButton is deprecated and should not be used
              // Use ElevatedButton instead
               
              // RaisedButton(
              //   onPressed: clearText,
              //   color: Colors.green,
              //   textColor: Colors.white,
              //   child: const Text('Clear'),
              // ),
            ],
          ),
        ),
      ),
    );
  }
}

El código anterior crea un TextField con un RaisedButton. Cada vez que ingrese algo en TextField y presione el botón, TextField se borrará. A continuación se muestra el resultado de la implementación anterior.

Producción:

Es realmente necesario agregar esta funcionalidad porque si está presionando una nueva pantalla sobre una pantalla que contiene un formulario y luego si regresa al formulario, los valores aún estarían allí.

Borrar TextField usando el icono de borrado

Además, si desea agregar un ícono claro en el campo de texto, también lo veremos.

A continuación se muestra la imagen del escenario mencionado anteriormente:

Casi todos los pasos, en este caso, serían similares a los pasos mencionados anteriormente, la única diferencia sería agregar el icono claro en lugar del botón elevado.

TextField(
   decoration: InputDecoration(
      hintText: 'Enter Something',
      focusColor: Colors.green,
      suffixIcon: IconButton(     // Icon to 
         icon: Icon(Icons.clear), // clear text
         onPressed: clearText,
    ),
  ),
   controller: fieldText,
),

En el código mencionado anteriormente, hay un TextField y se le agrega suffixIcon como decoración. El método clearText es el mismo que se usa en el código anterior.

Ejemplo:

import 'package:flutter/material.dart';
 
// function to instanciate the app
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  final fieldText = TextEditingController();
 
  MyApp({Key? key}) : super(key: key);
 
  void clearText() {
    fieldText.clear();
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          // Use SizedBox for whitespace
 
          child: SizedBox(
            width: 250,
            child: TextField(
              decoration: InputDecoration(
                hintText: 'Enter Something',
                focusColor: Colors.green,
                suffixIcon: IconButton(
                  icon: const Icon(Icons.clear),
                  onPressed: clearText,
                ),
              ),
              controller: fieldText,
            ),// TextField
          ), //SizedBox
        ),
      ),
    );
  }
}

Producción: