I am working on a simple ListView. I managed to update the list view with the correct data, see items
which is <String>[].obs
, when it got populated the data, I can see the list view is populated.
However, it seems after the list view items are built, they are not observing my selected
change, which is 0.obs
. From the debugging code, I can see the selected
got updated, the title changes accordingly, but the list view items did not rebuild (and hence change color), and not reflecting if they are being selected.
Please help me to understand why selected
change did not trigger list item rebuild, and how to fix. Thanks!
My home_controller.dart
:
import 'package:get/get.dart';
class HomeController extends GetxController {
final loading = true.obs;
final items = <String>[].obs;
final selected = 0.obs;
final count = 0.obs;
@override
void onInit() {
fetchItems();
super.onInit();
}
Future<void> fetchItems() async {
loading.value = true;
Future.delayed(const Duration(seconds: 5), () {
final newItems = ['abc', 'def', 'ghij', 'klmnopq'];
items.assignAll(newItems);
loading.value = false;
});
}
void onHover(int index) {
selected.value = index;
print('onHover: $index');
}
}
And my home_view.dart
:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/home_controller.dart';
class HomeView extends GetView<HomeController> {
const HomeView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:
Obx(() => Text('HomeView: selected ${controller.selected.value}')),
centerTitle: true,
),
body: Obx(() => Center(
child: controller.loading.value
? const CircularProgressIndicator()
: ListView.builder(
itemCount: controller.items.length,
itemBuilder: (BuildContext context, int index) {
final color = controller.selected.value == index
? Colors.green
: Colors.grey;
return MouseRegion(
onHover: (event) {
controller.onHover(index);
},
onExit: ((event) {
final selected = controller.selected.value;
print(
'exiting: $index, current selected: ${selected}');
}),
child: ListTile(
leading:
Container(width: 40, height: 40, color: color),
title: Text(controller.items[index]),
),
);
},
),
)),
);
}
}
CodePudding user response:
I believe wrapping your MouseRegion
with another Obx
would solve it for you. It being inside another builder will not make it able to be observed by the outer Obx