Crear una lista sencilla en Flutter – Dart

Tiempo de lectura: 3 minutos

Para crear un ejemplo de lista en el que añadamos un elemento, actualicemos la lista y también podamos eliminar elementos de la lista, hay que seguir los siguientes pasos:

Primero creamos el Widget principal qué llamamos desde main, dónde mostraremos la clase .dart con la vista diseñada.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lista de la compra DevCodeLight',
      theme: ThemeData(primarySwatch: Colors.cyan),
      home: ListaDevCodeLight(),
    );
  }
}

Después creamos un StatefulWidget, para que pueda modificarse la vista según las variables y elementos de la lista que creemos.

El Widget está compuesto principalmente por un inputDecoration, componente en el que podemos escribir, y un botón para poder añadir el texto escrito a la lista.

Después tenemos que añadir un ListTile como en el siguiente ejemplo que muestro a continuación:

ListView.builder(
  itemCount: lista_compra.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(lista_compra[index]),
      trailing: IconButton(
        icon: Icon(Icons.delete),
        onPressed: () => borrar(index),
      ),
    );

Os muestro un ejemplo con el código completo:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lista de la compra DevCodeLight',
      theme: ThemeData(primarySwatch: Colors.cyan),
      home: ListaDevCodeLight(),
    );
  }
}

class ListaDevCodeLight extends StatefulWidget {
  @override
  _ListaDevCodeLight createState() => _ListaDevCodeLight();
}

class _ListaDevCodeLight extends State<ListaDevCodeLight> {
  List<String> lista_compra = []; // Lista para almacenar las tareas
  String nuevo_elemento = ''; // Variable para almacenar la nueva tarea

  void crear() {
    setState(() {
      lista_compra.add(nuevo_elemento); // Añade la nueva tarea a la lista
      nuevo_elemento = ''; // Limpia el campo de texto para la nueva tarea
    });
  }

  void borrar(int index) {
    setState(() {
      lista_compra.removeAt(index); // Elimina la tarea seleccionada de la lista
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lista de la compra DevCodeLight')),
      body: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextField(
              onChanged: (value) {
                setState(() {
                  nuevo_elemento = value; // Actualiza la variable con el valor del campo de texto
                });
              },
              decoration: InputDecoration(
                labelText: 'Nuevo elemento para DevCodeLight',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () => crear(),
            child: Text('Añadir Nuevo elemento para DevCodeLight'),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: lista_compra.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(lista_compra[index]),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => borrar(index),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}