Flutter rest GETX map inside Obx not refreshing data on gui side - flutter

Question

Hello I have simple script I download data from from Rest api , there is my controller
and when I submit the button I Clear the list inside object Employee, after click I call the deleteEmployee() (int the future CRUD operations per row inside table,) , data are cleared, but data inside widget they are not refreshed. and I would like somethin more with that I need to show in table and make same operation per row.
I cant figure where is a problem.
after click the button must look like
class EmployeeController extends GetxController {
var empData = <Employe>[].obs;
#override
void onInit() {
fetchEmployee();
super.onInit();
}
void fetchEmployee() async {
final response =
await http.get(
Uri.parse('http://dummy.restapiexample.com/api/v1/employees'));
if (response.statusCode == 200) {
final string = response.body;
final parsed = json.decode(string);
Employe emp = Employe.fromJson(parsed);
Employe empx = Employe( message: "sampleTest", status: '123', data: emp.data.getRange(0, 4).toList() );
List<Employe> e = [];
e.add(empx);
e.add(emp);
empData.value = e;
} else {
throw Exception('Failed to load emplo');
}
}
void deleteEmployee (String enumId){
debugPrint(empData.toString());
debugPrint("before");
int index = empData.indexWhere((ele) => ele.message == enumId);
empData[index].data.clear();
debugPrint("after");
debugPrint(empData.toString());
}
}
void main() {
runApp(const MyApp());
}
final EmployeeController employeeController = Get.put(EmployeeController());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Obx(() => Row(
children: employeeController.empData
.map(
(e) => Expanded(
child: Column(
children: [
Text(e.message),
Text(e.toString()),
IconButton(
onPressed: () {
employeeController.deleteEmployee(e.message);
},
icon: Icon(Icons.abc_rounded),
)
],
),
),
)
.toList())),
);
}
}

Answer 1

In _MyHomePageState try to use employeeController.empData.value instead of employeeController.empData.
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Obx(() => Row(
children: employeeController.empData.value
.map(
(e) => Expanded(
child: Column(
children: [
Text(e.message),
Text(e.toString()),
IconButton(
onPressed: () {
employeeController.deleteEmployee(e.message);
},
icon: Icon(Icons.abc_rounded),
)
],
),
),
)
.toList())),
);
}
}