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)
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:
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),
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.
Product(
? aquí veo que ya lo tienes instanciado productForm!.calibers.add(CaliberproductForm
, que es elProduct
que se utiliza, se instancia justo antes de abrirse el formulario que contiene elCaliberTextFormFields
. 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.