Flutter bloc state does not update state when updating List/array index - flutter-bloc

Question

I'm trying to implement checkbox logic in bloc class. For that I create List<bool> checked in bloc class code is below. When CheckBoxClicked event trigger then for the first time state updated and I can see the box checked.
class CartProductsListBloc
extends Bloc<CartProductsListEvent, CartProductsListState> {
CartProductsListBloc() : super(InitialCartProductsListState());
final ProductRepository productRepository = ProductRepository();
List<bool> checked = List<bool>();
var productsList;
#override
Stream<CartProductsListState> mapEventToState(
CartProductsListEvent event) async* {
if (event is FetchCartProductsList) {
yield FetchingInProgress();
try {
productsList = await productRepository.loadListOfProductInUserCart();
//initialize checked according to productsList
for (int i = 0; i < productsList.length; i++) {
checked.add(false);
}
yield FetchCartProductsListSuccess(
productsList: productsList, checked: checked);
} catch (error) {
yield FetchCartProductsListFail(
error: 'Fail to laod data. Please try again\nOr Report the issue');
}
}
if (event is CheckBoxClicked) {
checked[event.index] = !checked[event.index];
yield CheckedBoxClickedHappened(
productsList: productsList, checked: checked);
}
}
}
But after that no matter how many times the event CheckBoxClicked called the state UI does not update. When I hot refresh, the changes appear which means logic works fine but the problem is Equatable is not able to detect changes in List/array index. Following is the code of CheckedBoxClickedHappened state.
class CheckedBoxClickedHappened extends CartProductsListState {
final productsList;
final checked;
const CheckedBoxClickedHappened({#required this.productsList, #required this.checked});
#override
List<Object> get props => [productsList, checked];
}
Note: I fixed the issue by adding the int count = 0; in bloc class and on each time when CheckBoxClicked event triggered I update the count++ like below
if (event is CheckBoxClicked) {
checked[event.index] = !checked[event.index];
yield CheckedBoxClickedHappened(
productsList: productsList, checked: checked, count: count++);
}
and in state
#override
List<Object> get props => [productsList, checked, count];
The purpose of the question is to know, does the Equatable can't detect changes in List index or I'm doing something wrong? If there is any confusion in question please ask I will improve it.

Answer 1

Yes because lists are mutable. In order to detect a change in the list you need to make a deep copy of the list some methods to make a deep copy are available here : https://www.kindacode.com/article/how-to-clone-a-list-or-map-in-dart-and-flutter/