dart - setup - flutter start

¿Qué son las claves en la clase de widgets sin estado?

Question

En los documentos de aleteo hay un código de muestra para una subclase de widget sin estado como se muestra:

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));
  }
}

y esto

class Frog extends StatelessWidget {
  const Frog({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return new Container(color: color, child: child);
  }
}

¿Qué es una clave y cuándo debería usarse este súper constructor? Parece que si tienes tu propio constructor debes tener {Clave de tecla} ¿por qué? He visto otros ejemplos en los que la súper palabra clave no se usa, de modo que aquí es donde está mi confusión.

Answer 1

La clave es un parámetro opcional necesario para preservar el estado en su árbol de widgets, debe usarlos si desea mover una colección de elementos en su árbol y preservar el estado de los mismos.

La mejor explicación se puede encontrar en este video de Google Cuándo usar las teclas - Flutter Widgets 101 Ep. 4

Answer 2

TLDR: Todos los widgets deben tener una Key key como parámetro opcional o su constructor. Key es algo que utiliza el motor de aleteo en el paso de reconocer qué widget en una lista ha cambiado.

Es útil cuando tiene una lista ( Column , Row , lo que sea) de widgets del mismo tipo que potencialmente se pueden eliminar / insertar.

Digamos que tienes esto (el código no funciona, pero entiendes la idea):

AnimatedList(
  children: [
    Card(child: Text("foo")),
    Card(child: Text("bar")),
    Card(child: Text("42")),
  ]
)

Potencialmente, puede eliminar cualquiera de estos widgets individualmente con un golpe.

La cosa es que nuestra lista tiene una animación cuando un niño es eliminado. Así que vamos a quitar "barra".

AnimatedList(
  children: [
    Card(child: Text("foo")),
    Card(child: Text("42")),
  ]
)

El problema: sin Key , flutter no podrá saber si el segundo elemento de tu Row desapareció. O si es el último que desapareció y el segundo cambia su hijo.

Por lo tanto, sin la Key , podría tener un error en el que su animación de salida se reproducirá en el último elemento.

Aquí es donde Key tiene lugar.

Si comenzamos nuestro ejemplo de nuevo, usando la tecla tendríamos esto:

AnimatedList(
  children: [
    Card(key: ObjectKey("foo"), child: Text("foo")),
    Card(key: ObjectKey("bar"), child: Text("bar")),
    Card(key: ObjectKey("42"), child: Text("42")),
  ]
)

observe cómo la clave no es el índice secundario, sino algo exclusivo del elemento.

A partir de este punto, si eliminamos nuevamente "barra", tendremos

AnimatedList(
  children: [
    Card(key: ObjectKey("foo"), child: Text("foo")),
    Card(key: ObjectKey("42"), child: Text("42")),
  ]
)

Gracias a que la key está presente, el motor de aleteo ahora sabe con seguridad qué widget se eliminó. Y ahora nuestra animación de salida se reproducirá correctamente en "bar" en lugar de "42".