dart - ListView no se actualiza mientras que la lista adjunta sí lo hace(Flutter)

Question

Estoy tratando de familiarizarme con el aleteo y me enfrento a un caso extraño. Quiero construir un ListView dinámico donde un botón + permite agregar elementos. Escribí el siguiente código de estado:

class MyWidgetListState extends State<MyWidgetList> {
  List<Widget> _objectList = <Widget>[
    new Text(''test''),
    new Text(''test'')
  ];

  void _addOne() {
    setState(() {
      _objectList.add(new Text(''test''));
    });
  }

  void _removeOne() {
    setState(() {
      _objectList.removeLast();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new ListView(
          shrinkWrap: true,
          children: _objectList
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.remove_circle),
              iconSize: 36.0,
              tooltip: ''Remove'',
              onPressed: _objectList.length > 2 ? _removeOne : null,
            ),
            new IconButton(
              icon: new Icon(Icons.add_circle),
              iconSize: 36.0,
              tooltip: ''Add'',
              onPressed: _addOne,
            )
          ],
        ),
        new Text(_objectList.length.toString())
      ],
    );
  }
}

Mi problema aquí es que el ListView está visualmente atascado con los 2 elementos con los que lo inicialicé.

Internamente, la _objectList está bien gestionada. Para propósitos de prueba, agregué un widget de Text simple en la parte inferior que muestra el tamaño de la lista. Este funciona bien cuando hago clic en los botones Agregar / Eliminar y se actualiza correctamente. ¿Me estoy perdiendo de algo?

Answer 1

Flutter se basa en datos inmutables. Lo que significa que si la referencia a un objeto no cambió, el contenido tampoco.

El problema es que, en su caso, siempre envía a ListView la misma matriz y, en cambio, muta su contenido. Pero esto lleva a ListView asumiendo que la lista no cambió y, por lo tanto, evita el procesamiento inútil.

Puedes cambiar tu setState para tenerlo en cuenta:

setState(() {
  _objectList = List.from(_objectList)
    ..add(Text("foo"));
});