Can't change the status of checkbox in GridView Flutter with Mobx - flutter

Question

I want to add a checkbox for GirdView in Flutter. The data was fetched from API request include attribute selected default is false. When I click on the checkbox of each Item it will change value is True and update on UI and I use Mobx to observe these change actions. When I debugging the values were changed but UI didn't update, I really don't know the reason. I added 2 pictures for UI and Mobx model below.
API:
{
"name": "HuynhDuy Phuc",
"birthday": "None",
"phone": "N/A",
"isSelected": false
},
{
"name": "Doan Phuc",
"birthday": "None",
"phone": "N/A",
"isSelected": false
},
{
"name": "Phuc Vu",
"birthday": "None",
"phone": "N/A",
"isSelected": false
},
final _userApiPresenter = Provider.of<UserApiPresenter>(context);
_userApiPresenter.fetchUsersList();
Observer(
name: 'ListHomePage',
builder: (BuildContext context) {
return (_userApiPresenter.userAPI != null)
? AnimationLimiter(
child: GridView.builder(
physics: BouncingScrollPhysics(),
padding: EdgeInsets.all(12),
addAutomaticKeepAlives: true,
//Determine the number of cells per row
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemCount:
_userApiPresenter.userAPI.users.length,
itemBuilder: (context, index) {
User user =
_userApiPresenter.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>[
UserItem(
name: user.name,
type: user.name,
phone: user.phone,
birthday: user.birthday,
isSelected: user.selected,
),
Align(
alignment: Alignment.topRight,
child: Checkbox(
value: user.selected,
onChanged: (_) {
if(user.selected){
_userApiPresenter.changeStatusCheckBox(index: index);
} else{
_userApiPresenter.changeStatusCheckBox(index: index);
}
},
),
),
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder:
(BuildContext context) =>
UserDetailPage(
index: index,
name: user.name,
),
),
);
},
),
),
),
);
},
),
)
: Center(
child: CircularProgressIndicator(),
);
},
)
UI
Mobx model

Answer 1

Observable information about users array and the user model itself is missing, but what you need to do(if already not) is:
Make the array of users observable as well - this way any addition, deletion, etc will results in update of the number of user boxes in the UI
Make property selected of User observable also - this way when certain user 'selected' state is effected, the UI will render the change
And something off topic:
You don't need #action attribute on getUser method, because this method is not updating any observable data
If this answer does not solve your problem, please provide implementation of userApi and User :)

Answer 2

You just missing one thing.
mobX does not update UI unless you tell it main variable changed..
To do so, just add the following line of code to your changeStatusCheckBox()
_userAPI = _userAPI;