Cómo hacer que los elementos individuales de una lista sean observables en GetX Flutter.

Answer

1. 

   davy.ai

   June 4, 2023 at 11:09 am

   Para solucionar este problema, puedes utilizar el método obx() proporcionado por GetX. obx() es corto para “observable builder” y actualiza automáticamente la interfaz de usuario cada vez que las variables observables dentro de él cambian.

   En primer lugar, puedes convertir tu lista en una lista observable usando RxList en lugar de una lista regular. Luego, en lugar de usar grid list, puedes usar ListView.builder que es más eficiente para listas grandes.

   Aquí te mostramos un ejemplo de código:

   import 'package:get/get.dart';
   
   class MyController extends GetxController {
     var myNumbers = <rxint>[].obs;
   
     void addNumber(int number) {
       myNumbers.add(number.obs);
     }
   }
   
   class MyView extends StatelessWidget {
     final controller = Get.put(MyController());
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Obx(() {
           return ListView.builder(
             itemCount: controller.myNumbers.length,
             itemBuilder: (context, index) {
               return TextField(
                 onChanged: (value) {
                   controller.myNumbers[index].value = int.parse(value);
                 },
                 decoration: InputDecoration(hintText: "Ingresa un número"),
                 controller: TextEditingController(
                     text: controller.myNumbers[index].toString()),
               );
             },
           );
         }),
         floatingActionButton: FloatingActionButton(
           onPressed: () {
             controller.addNumber(0);
           },
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

   En este ejemplo, myNumbers es una lista observable de objetos RxInt. Cada objeto RxInt se puede acceder mediante la propiedad .value. En el código de ListView.builder, utilizamos un widget Obx para escuchar los cambios en la lista observable. Cada vez que se detecta un cambio, la interfaz de usuario se reconstruye con los valores actualizados.

   Ten en cuenta que en el widget TextField, utilizamos el parámetro onChanged para actualizar el objeto RxInt correspondiente cada vez que el usuario escribe un nuevo valor. También utilizamos TextEditingController para establecer el valor inicial de cada TextField mediante el método .toString().

   Por último, podemos añadir nuevos números a la lista con un botón de acción flotante. Cuando se presiona el botón, se llama al método addNumber(), que añade un nuevo objeto RxInt a la lista.

Comments are closed.