How to use Mobx for List object in Flutter? - flutter

Question

I want to change the status of checkbox via use Mobx, after the click the value have changed but not update on UI, Observer don't see change action that it is rebuilding this Widget
In file Mobx:
#observable
List<bool> statusCheckbox = List<bool>();
#computed
List<bool> get getStatusCheckBox {
return statusCheckbox;
}
#action
changeStatusItem(bool val, int index) {
statusCheckbox[index] = val;
}
In file contain Widget:
Observer(
name: 'ListHomePage',
builder: (BuildContext context) {
return child: GridView.builder(
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: (itemWidth / itemHeight),
),
itemCount:
_userManagementStore.userAPI.users.length,
itemBuilder: (context, index) {
UserManagement user =
_userManagementStore.getUser(index: index);
return AnimationConfiguration.staggeredGrid(
position: index,
duration:
const Duration(milliseconds: 375),
columnCount: 2,
child: Container(
child: ScaleAnimation(
child: GestureDetector(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Checkbox(
value: _userManagementStore.getStatusCheckBox[index],
onChanged: (bool val) {
_userManagementStore.changeStatusItem(val, index);
},
),
),
],
),
},
)
I can't find the root cause of the issue

Answer 1

As said Antoan Elenkov, you should remove the #computed property.
But you main problem is that you should not using a List but an ObservalbleList, it works like a List.
So, you have to replace
List<bool> statusCheckbox = List<bool>();
by
#observable
ObservableList<bool> statusCheckbox = ObservableList();