Обновление массива в Statefull Widget?

Question

[AlexCruel]

"Screnn" циклом генерирует листинг контактов через Statefull виджет "ContactItem".

children: [
            for (Contact contact in _filteredContactsList)
              ContactItem(contact: contact, isAllChecked: isAllChecked,)
          ],

"_filteredContactsList" - массив контактов, который обновляется (setState) при определенных условиях в "Screen".
Если условие происход, массив обновляется. Statefull виджет "ContactItem" тоже обновляется, но неправильно. Если в массиве убираются определенные элементы (контакты), то виджет как будто оставляет старый массив, но обрезает его на количество элементов, которое стало в "Screnn".

Например.
Массив [1, 2, 3, 4, 5, 6, 7].
Произошло изменение массива в "Screnn".
Новый массив [1, 2, 3, 5, 6, 7].
В Statefull виджете отобразилось [1, 2, 3, 4, 5, 6].
То есть как бы убрали элемент 4 (четыре), а фактически в Statefull виджете массив обрезался на один элемент с конца. Да, массив стал меньше, но почему он не обновлися в виджете?

Если виджет "ContactItem" сделать Stateless, тогда все работает.

Answer 1

[ChessMax]

Видимо необходимо переопределить метод didUpdateWidget и обновить Стейт, чтобы отображались актуальные данные. Так же неплохо бы было добавить код ваших виджетов (минимально воспроизводимый пример), чтобы было возможно более точно определить в чем проблема.

Comments

[AlexCruel]

ContactItem

class ContactItem extends StatefulWidget {
  final Contact contact;
  final bool isAllChecked;

  const ContactItem({super.key, required this.contact, required this.isAllChecked});

  @override
  State<ContactItem> createState() => _ContactItem(this.contact, this.isAllChecked);
}

class _ContactItem extends State<ContactItem> {
  final Contact contact;
  final bool isAllChecked;
  bool isChecked = false;

  _ContactItem(this.contact, this.isAllChecked);

  @override
  void initState() {
    super.initState();
  }

  @override
  void didUpdateWidget(ContactItem oldWidget) {
    print(contact.id);
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = !isChecked;
        });
      },
      title: Text('${contact.name}'),
      subtitle: Text('${contact.id}'),
      controlAffinity: ListTileControlAffinity.leading,
    );
  }
}

ContactsScreen

Widget contactsList() {
    return Expanded(
      child: Center(
        child: isLoaded ? (_filteredContactsList.isNotEmpty ? ListView(
          children: [
            for (Contact contact in _filteredContactsList)
              ContactItem(contact: contact, isAllChecked: isAllChecked,)
              // contactItem(contact)
          ],
        ) : Text('Контактов нет')) : Text('Идет загрузка...'),
      ),
    );
  }

[ChessMax]

Нужно либо вот так:

class ContactItem extends StatefulWidget {
  final Contact contact;
  final bool isAllChecked;

  const ContactItem({super.key, required this.contact, required this.isAllChecked});

  @override
  State<ContactItem> createState() => _ContactItem(this.contact, this.isAllChecked);
}

class _ContactItem extends State<ContactItem> {
  Contact contact;
  final bool isAllChecked;
  bool isChecked = false;

  _ContactItem(this.contact, this.isAllChecked);

  @override
  void initState() {
    super.initState();
  }

  @override
  void didUpdateWidget(ContactItem oldWidget) {
    print(contact.id);
    if (oldWidget.contact != widget.contact) {
        contact = widget.contact;
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = !isChecked;
        });
      },
      title: Text('${contact.name}'),
      subtitle: Text('${contact.id}'),
      controlAffinity: ListTileControlAffinity.leading,
    );
  }
}

Либо, что проще в данном случае:

class ContactItem extends StatefulWidget {
  final Contact contact;
  final bool isAllChecked;

  const ContactItem({super.key, required this.contact, required this.isAllChecked});

  @override
  State<ContactItem> createState() => _ContactItem(this.isAllChecked);
}

class _ContactItem extends State<ContactItem> {
  final bool isAllChecked;
  bool isChecked = false;

  _ContactItem(this.isAllChecked);

  @override
  void initState() {
    super.initState();
  }

  @override
  void didUpdateWidget(ContactItem oldWidget) {
    print(contact.id);
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = !isChecked;
        });
      },
      title: Text('${widget.contact.name}'),
      subtitle: Text('${widget.contact.id}'),
      controlAffinity: ListTileControlAffinity.leading,
    );
  }
}