Checkbox are not changing their status with MobX - flutter

Question

I'm using MobX on Flutter to control states.
Clicking on the FloatingActionButton generates a ListView that contains CheckboxListTile.
However checkboxes are not changing their status
Could you help me fix this problem?
Below is the code and an image:
home_controller.dart
import 'package:flutter/material.dart';
import 'package:mobx/mobx.dart';
import 'package:flutter_modular/flutter_modular.dart';
part 'home_controller.g.dart';
#Injectable()
class HomeController = _HomeControllerBase with _$HomeController;
abstract class _HomeControllerBase with Store {
#observable
ObservableList<CheckBoxModel> mapValues = <CheckBoxModel>[].asObservable();
#observable
ListView listViewCheckbox;
#action
void listViewChekbox(value) {
for (var i in value) {
mapValues.add(CheckBoxModel(key: i));
}
}
}
class CheckBoxModel{
CheckBoxModel({this.key, this.checked = false});
String key;
bool checked;
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'home_controller.dart';
class HomePage extends StatefulWidget {
final String title;
const HomePage({Key key, this.title = "Home"}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends ModularState<HomePage, HomeController> {
HomeController controller = HomeController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Observer(builder: (_) {
return controller.mapValues == null ? Container() : ListView.builder(
itemCount: controller.mapValues.length,
itemBuilder: (_, int index){
return CheckboxListTile(
title: Text(controller.mapValues[index].key),
value: controller.mapValues[index].checked,
onChanged: (bool value) {
controller.mapValues[index].checked = value;
},
);
},
);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
List listValues = ['foo', 'bar'];
controller.listViewChekbox(listValues);
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
According to the image, the ListView of CheckboxListTile is created but the checkboxes do not change their status.

Answer 1

You don't have to use setState() or anything else mobX does that for you, you just need to edit you abstract class to tell mobX main variable value changed, like next
abstract class _HomeControllerBase with Store {
#observable
ObservableList<CheckBoxModel> mapValues = <CheckBoxModel>[].asObservable();
#observable
ListView listViewCheckbox;
#action
void listViewChekbox(value) {
for (var i in value) {
mapValues.add(CheckBoxModel(key: i));
}
mapValues = mapValues;
}
}
That's how you can solve it.

Answer 2

the solution found was to insert setState
onChanged: (bool value) {
setState(() {
controller.mapValues[index].checked = value;
});
},