¿Para qué sirven las `Key` en Flutter y cuándo necesitas usarlas?
Ver respuesta — intenta responderla en voz alta primero
Las Key ayudan a Flutter a identificar widgets cuando reconstruye el árbol, para que asocie correctamente cada widget con su estado. Normalmente no las necesitas, pero se vuelven necesarias cuando reordenas, agregas o quitas elementos de una lista de widgets con estado, para que el estado no se mezcle entre elementos.
Cuando Flutter reconstruye, compara el árbol nuevo con el anterior para decidir qué reutilizar. Por defecto compara por tipo de widget y posición. Eso funciona casi siempre, pero falla cuando cambias el orden de widgets del mismo tipo que tienen estado: Flutter puede asignar el estado equivocado al widget equivocado.
Una Key le da a cada widget una identidad estable para que Flutter lo siga correctamente aunque cambie de posición.
Tipos comunes:
ValueKey: identidad basada en un valor (por ejemplo, un id).ObjectKey: identidad basada en un objeto.UniqueKey: identidad única siempre (fuerza a Flutter a tratarlo como nuevo).GlobalKey: identidad global; permite acceder al estado o posición del widget desde fuera. Es la más costosa; úsala con cuidado.
import 'package:flutter/material.dart';
// En una lista reordenable de widgets con estado, las keys evitan
// que el estado se "pegue" al elemento equivocado.
class ListaTareas extends StatelessWidget {
final List<String> tareas;
const ListaTareas({super.key, required this.tareas});
@override
Widget build(BuildContext context) {
return Column(
children: [
for (final tarea in tareas)
ListTile(
key: ValueKey(tarea), // identidad estable por tarea
title: Text(tarea),
),
],
);
}
}
Poner UniqueKey() en widgets dentro de un build "por si acaso". Como UniqueKey() genera una llave distinta cada vez, obligas a Flutter a destruir y recrear el widget (y perder su estado) en cada reconstrucción. Eso mata el rendimiento y provoca comportamientos raros. Las keys se usan con intención, no por default.
"Las keys ayudan a Flutter a identificar widgets cuando reconstruye el árbol, para que asocie cada widget con su estado correcto. La mayoría del tiempo no las necesito, porque Flutter compara por tipo y posición. Pero cuando tengo una lista de widgets con estado y los reordeno, agrego o elimino, uso una
ValueKeycon algo único como un id para que el estado no se mezcle entre elementos.GlobalKeyla reservo para casos donde necesito acceder al estado desde fuera, porque es más costosa."
Tienes una lista de dos Checkbox con estado y, al reordenarlos, el "marcado" se queda en la posición equivocada. ¿Cómo lo arreglas?
Ver respuesta
Asignando una Key estable y única a cada elemento, basada en su identidad (no en su posición). Por ejemplo, key: ValueKey(item.id). Así Flutter sigue a cada Checkbox por su identidad aunque cambie de lugar, y el estado (marcado/desmarcado) viaja con el elemento correcto.