Flutter state update for list items

Question

I am using getX for state management in my app. The model files contains a list of items and I want to update to items but the updated value doesn't get updated on being changed.

The code for View:

body: ListView.builder(
          itemCount: _antigens.fungus.length,
          itemBuilder: (context, index) {
            return ListTile(
                title: Text(_antigens.fungus[index]['name']),
                onTap: () {
                  controller.updateValue(context, index);
                });
          }),

Controller:

updateValue(BuildContext context, int index) async {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text('Enter a value'),
            content: TextField(
              controller: controller,
              keyboardType: TextInputType.number,
            ),
            actions: [
              ElevatedButton(
                onPressed: () {
                  _antigen.fungus[index]['value'] = controller.text;
                  Get.back();
                },
                child: const Text('Ok'),
              )
            ],
          );
        });
  }

view to show updated value:

return Center(
      child: Text(antigens.fungus[0]['value'].toString()),
    );

Answer 1

What did the work for me for updating the listview is this piece of code:

 @override
 Widget build(BuildContext context) {
  return GetX<CarItemsController>(
  init: CarItemsController(),
  builder: (controller) {}); 
 }

Just put your ProductController() in the init parameter of the GetX widget.

Answer 2

GetX provides two ways to update you ui.

Reactive state manager

this way you need to define your variables as Rx by adding a '.obs` at the end of the value, e.g.:

final myBool = true.obs; // creates a RxBool
final myList = [].obs; // creates a RxList
final myString = 'sajad'.obs; // creates a RxString

And then wrap the widgets where you use this reactive variables with an Obx widget, e.g.

final isLoading = false.obs // in controller

return Obx(                 // in build method
       () => Visibiliy(
               visible: isLoading
               child: CircularProgressIndicator()
          )
       );

Then you can change the state to loading by using isLoading.value = true

GetBuilder state manager

Using this way, you can declare your variables like you always do but in UI you need to wrap widgets that you want to rebuild a GetBuilder and specify a GetxController for it, e.g.:

class MyController extends GetxController{
   bool isLoading = false;
}

then in UI wrap your widgets that need to rebuild in a GetBuilder<MyController>

return GetBuilder<MyController>(        // in build method
       builder: (controller) => Visibiliy(
               visible: controller.isLoading
               child: CircularProgressIndicator()
          )
       );

then to rebuild UI, call update() of MyController

// inside of controller
isLoading = true;
update();