0
I’m using Mobx and I want to create a checkbox list, that list is already created, however I can’t make the values change when we click the checkbox, although the logic is running and adds items to the list the change is not detected, but if refresh already appears chekbox checked.
I have the following store:
ObservableList<Category> categoryCheck = ObservableList<Category>();
ObservableList<Category> categoriesTree = ObservableList<Category>();
@action
void removeCategoryCheck(Category category) {
categoryCheck.remove(category);
categoryCheck = categoryCheck;
}
@action
void addCategoryCheck(Category category) {
categoryCheck.add(category);
categoryCheck = categoryCheck;
}
@action
Future<void> getCategoriesTree() async {
setLoading(true);
clearCategoriesTree();
final response = await repository.getCategoriesTree();
response.map((category) {
addToCategoriesTree(Category.fromJson(category));
}).toList();
categoriesTree = categoriesTree;
setLoading(false);
}
On my screen where I show the checkbox list, I have the following:
Widget _buildScreen(context) {
return Observer(
builder: (context) {
return ListView(
shrinkWrap: true,
//padding: EdgeInsets.all(15.0),
children: [
_buildCategories(context),
],
);
},
);
}
Widget _buildCategories(context) {
if (_storeCategories.isLoading) {
return Container(
child: Text('A carregar Categorias'),
);
} else {
return Container(
padding: EdgeInsets.only(top: 10),
height: 300,
child: ListView(
shrinkWrap: false,
children: [
TreeView(
indent: 44,
iconSize: 30,
treeController: _controller,
nodes: [
for (var item in _storeCategories.categoriesTree)
TreeNode(
content: Row(
children: [
Text(item.name,
style: TextStyle(color: Colors.black)),
Theme(
data: ThemeData(
unselectedWidgetColor: Colors.grey,
),
child: Checkbox(
value: _storeCategories.inCheckList(item),
activeColor: Colors.green,
onChanged: (bool newValue) {
if (newValue) {
_storeCategories.addCategoryCheck(item);
} else {
_storeCategories
.removeCategoryCheck(item);
}
}),
)
],
),
children: item.childs.length > 0
? [
for (var itemChild in item.childs)
TreeNode(
content: Row(
children: [
Text(itemChild.name,
style: TextStyle(
color: Colors.black)),
Theme(
data: ThemeData(
unselectedWidgetColor:
Colors.grey,
),
child: Checkbox(
value: _storeCategories
.inCheckList(itemChild),
activeColor: Colors.green,
onChanged: (bool newValue) {
if (newValue) {
_storeCategories
.addCategoryCheck(
itemChild);
} else {
_storeCategories
.removeCategoryCheck(
itemChild);
}
}),
)
],
),
children: itemChild.childs.length > 0
? [
for (var itemChildChild
in itemChild.childs)
TreeNode(
content: Row(
children: [
Text(itemChildChild.name,
style: TextStyle(
color:
Colors.white)),
Theme(
data: ThemeData(
unselectedWidgetColor:
Colors.grey,
),
child: Checkbox(
value: _storeCategories
.inCheckList(
itemChildChild),
activeColor:
Colors.green,
onChanged:
(bool newValue) {
if (newValue) {
_storeCategories
.addCategoryCheck(
itemChildChild);
} else {
_storeCategories
.removeCategoryCheck(
itemChildChild);
}
}),
)
],
)),
]
: []),
]
: []),
],
)
],
));
}
}
Your question is a little complex, and can be solved in a few different ways... But to summarize, so that your list "listen" to the modifications of Checkado you need to build the list from the Observablelist which receives these changes. Which in your case is the
categoryCheck.– Matheus Ribeiro
Take a look at my github
Desafio_campominadothere you find an example that can help you a lot. Follow some useful files: Minesweepercontroller; Fieldmodel; Minefield.– Matheus Ribeiro