0

Primero mostrare un poco como están esturados los widgets que involucra el problema y luego pasaré a explicar el problema en sí

Estructura de los Widgets

Tengo el siguiente widget CaliberTextFormFields que muestra campos de un formulario con el fin de editar objetos de la clase Caliber. Estos objetos Caliber se guardan en una lista en la propiedad un objeto de la clase Product en el provider ProductProvider. El Widget CaliberTextFormFields se llama en un Column

En resumen sería Caliber >> Product >> ProductProvider

Y los Caliber son editados en el CaliberTextFormFields que se llama en un Column

class CaliberTextFormFields extends StatelessWidget {
  const CaliberTextFormFields({
    required this.caliber,
  });
  final Caliber caliber;
  @override
  Widget build(BuildContext context) {
    ProductProvider productProvider = Provider.of<ProductProvider>(context); //Provider donde se almacenan los objetos Caliber
    return Column(
        children: [
          IconButton(
              icon: const Icon(Icons.delete),
              onPressed: ()=>productProvider.removeCaliberFromProductForm(caliber), //Borra el objeto Caliber de la lis[![introducir la descripción de la imagen aquí][1]][1]
          ),
          const Text("Calibre"),
          TextFormField(
              initialValue: caliber.weight,
              onChanged: (value){
                caliber.weight = value;
              },
          ),
          const Text("Cantidad"),
          TextFormField(
              initialValue: caliber.amount.toString(),
              onChanged: (value){
                try{
                   caliber.amount = int.parse(value);
                } catch(e){
                  print(e);
                }
              },
          ),
          const Text("Precio"),
          TextFormField(
              initialValue: caliber.price.toString(),
              onChanged: (value){
                try{
                  caliber.price = double.parse(value);
                }catch (e){
                  print(e);
                }
              },
          ),
          const Text("Peso por caja"),
          TextFormField(
              initialValue: caliber.weightForBox.toString(),
              onChanged: (value){
                try{
                  caliber.weightForBox = double.parse(value);
                } catch(e){
                  print(e);
                }
              },
          ),
        ],
    );
  }
}

Así se vería el widget CalibertTextFormFields (con los estilos gráficos que he omitido) CaliberTextFormFields

La clase Caliber, cuyos objetos son editados con el widget anterior:

class Caliber {
    Caliber({
        required this.weight,
        required this.price,
        required this.amount,
        required this.weightForBox,
        required this.id,
    });
    int id;
    String weight;
    double price;
    int amount;
    double weightForBox;
}

Aquí llamo los CalibertTextFormFields:

class ProductForm extends StatelessWidget {
 @override
    Widget build(BuildContext context) {
      ProductProvider productProvider = Provider.of<ProductProvider>(context);
      return Form(
        key: _formKey,
        child: Column(
          children: [
            //...
            ..[for (var caliber in productProvider.productForm!.calibers) CaliberTextFormFields(caliber: caliber)],
          ]
}

Y el objeto Product, dónde se almacenan los objetos de Caliber en la propiedad calibers. Este objeto Product se almacena en el ProductProvider:

class Product {
    Product({required this.id, required this.name, required this.calibers, required this.media});
    String name;
    String id;
    List<Caliber> calibers; //Aquí se almacenan los objetos de la clase Caliber
    List<String> media; 
    Uint8List? coverImage;
}

Finalmente, este es el Provider donde se almacena el Product que contiene los Caliber:

class ProductProvider extends ChangeNotifier{
  Product? productForm;

  void addCaliberToProductForm(){  //Agrega un Caliber con ID único a la lista 
        if(productForm!.calibers.isNotEmpty) {
          productForm!.calibers.add(Caliber(
            id:productForm!.calibers.last.id+1, 
            weightForBox:0, 
            weight:"Calibre", 
            price:0, 
            amount:0
          ));
        } else {
          productForm!.calibers.add(Caliber(
            id:0, 
            weightForBox:0, 
            weight:"Calibre", 
            price:0, 
            amount:0
          ));
        }
    notifyListeners();
  }

  void removeCaliberFromProductForm(Caliber caliber){
    productForm!.calibers.removeWhere((element) => element.id == caliber.id);
    notifyListeners();
  }
}

Problema

El problema viene en que cuando hay más de dos Caliber en la lista y se elimina el de arriba con el IconButton de delete, se borra correctamente con la función removeCaliberFromProductForm. Pero, al momento de redibujarse el Widget con los Caliber restantes el CaliberTextFormFields borrado se mantiene mientras que el único que se borra es el último CaliberTextFormFields de la lista. De la siguiente forma:

GIF del error

Sin embargo, utilizando el debugger veo que en la lista del Product del ProductProvider se borrar el elemento adecuado. Además, al llamar el CaliberTextFormFields cuando se redibuja también se pasa el Caliber adecuado como parametro, por lo que no se por que se redibujan incorrectamente.

Además, si agrego al principio del CaliberTextFormFields un Text con los valores del parametro Caliber que se le pasan, estos muestran los datos correctos. Por lo que supongo que el prblema debe ser del TextFormField.

Lineas agregadas:

 Text(caliber.id.toString()),
 Text(caliber.weight),

GIF del error

Convirtiendo CaliberTextFormFields en un Statefulidget y agregando los siguientes initState y dispose:

@override
void initState(){
    print("initState: ${widget.caliber.id.toString()}");
    print("initState: ${widget.caliber.weight}");
    super.initState();
}

@override
void dispose(){
    print("dispose: ${widget.caliber.id.toString()}");
    print("dispose: ${widget.caliber.weight}");
    super.dispose();
}

al realizar el procedimiento anterior me pinta lo siguiente:

I/flutter (13925): dispose: 1

I/flutter (13925): dispose: No debe borrarse

Posible razón del error

Encontré buscando en la documentación del TextFormField lo siguiente que podría ser la razón del error:

When the widget has focus, it will prevent itself from disposing via its underlying EditableText's AutomaticKeepAliveClientMixin.wantKeepAlive in order to avoid losing the selection. Removing the focus will allow it to be disposed.

Sin embargo, no se como cambiar esa propiedad.

10
  • 1
    dentro de CaliberTextFormFields , usa Provider.of<ProductProvider>(context, listen: false); no necesitas escuchar cambios ahí, solo acceder al provider para borrar el elemento Commented el 19 jun. 2022 a las 0:54
  • Lo he cambiado. Pero, el error persiste. Commented el 19 jun. 2022 a las 10:13
  • 1
    en que momento instancias Product( ? aquí veo que ya lo tienes instanciado productForm!.calibers.add(Caliber Commented el 19 jun. 2022 a las 17:16
  • El productForm, que es el Product que se utiliza, se instancia justo antes de abrirse el formulario que contiene el CaliberTextFormFields. Si me lo pides agrego el código .Pero, creo que no contiene nada relevante y se aleja un poco del problema en sí. Además, agrego otra información que puede servir que acabo de encontrar. Commented el 19 jun. 2022 a las 18:02
  • una última pregunta, ese valor de "DEBE BORRARSE" y "NO DEBE BORRARSE" tu lo cambias ? o ya los creas así? Commented el 20 jun. 2022 a las 14:53

1 respuesta 1

1

Creo que puedo entender el error, te lo explico:

class CaliberTextFormFields extends StatelessWidget {
  const CaliberTextFormFields({
    required this.caliber,
  });
  final Caliber caliber;
  @override
  Widget build(BuildContext context) {
    ProductProvider productProvider = Provider.of<ProductProvider>(context); //Provider donde se almacenan los objetos Caliber
    return Column(
        children: [
          IconButton(
              icon: const Icon(Icons.delete),
              onPressed: ()=>productProvider.removeCaliberFromProductForm(caliber), //Borra el objeto Caliber de la lis[![introducir la descripción de la imagen aquí][1]][1]
          ),
          const Text("Calibre"),
          TextFormField(
              initialValue: caliber.weight,
              onChanged: (value){
                caliber.weight = value;
              },
          ),

En esa parte, estás inicializando el TextFormField con un valor específico, como el widget no se vuelve a crear, solo el valor se actualiza caliber.weight , pero esto ya no afecta al initialValue ya que eso solo se crea una vez.

Lo que podrías hacer es cambiarlo a StatefulWidget , eliminar esta línea: initialValue: caliber.weight, y usar un TextEditingController, luego al momento de actualizar el widget, cambiar el valor del textEditingController.

Así:


// Dentro de tu State

final controller = TextEditingController();

    @override
  void didUpdateWidget(CaliberTextFormFields oldWidget) {
    controller.text = caliber.weight;
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    ProductProvider productProvider = Provider.of<ProductProvider>(context, listen: false); //Provider donde se almacenan los objetos Caliber
    return Column(
        children: [
          IconButton(
              icon: const Icon(Icons.delete),
              onPressed: ()=>productProvider.removeCaliberFromProductForm(caliber), //Borra el objeto Caliber de la lis[![introducir la descripción de la imagen aquí][1]][1]
          ),
          const Text("Calibre"),
          TextFormField(
              //initialValue: caliber.weight,
              controller: controller,
              onChanged: (value){
                caliber.weight = value;
              },
          ),

Avisas si te funciona :)

5
  • Muchas gracias, funciona correctamente. Entiendo que mi error viene de que yo creía que al redibujarse el padre, también lo hacían los hijos y por ende se volvía a utilizar el initValue. ¿Qué es lo que no es correcto de esto? Commented el 20 jun. 2022 a las 18:34
  • 1
    initialValue: caliber.weight, no vuelve a entrar ahí, eso solo la primera vez que se crea, también necesitabas esto: Provider.of<ProductProvider>(context, listen: false); para que no escuche cambios ahí. Te recomiendo trabajar con TextEditingControllers para manejo de texto en textfields Commented el 20 jun. 2022 a las 18:43
  • ok, muchas gracicas. Commented el 20 jun. 2022 a las 18:46
  • sigueme en youtube :V Commented el 20 jun. 2022 a las 18:46
  • 1
    Ya lo hago jaja, hace un par de videos te comente agradeciéndote por ayudarme siempre en SO. Commented el 20 jun. 2022 a las 18:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.