How to generate and validate a list of TextEditingController and upload the List of textEditingController to firebase -flutter - firebase

Question

I created an upload page where user picks multiple images and then assign a price for each image.I'm want to achieve this with a list of TextEditing controllers and displaying textfield under each image.
First I created the list and later generate the list according to the length of the images.
List<TextEditingController> _controller;
Widget buildGridView() {
return Container(
height: 400,
child: GridView.count(
crossAxisCount: 1,
scrollDirection: Axis.horizontal,
children: List.generate(images.length, (index) {
//I can't use the index I defined below in controller.
//says (i) is undefined so I used the index which defined above.
//Am I doing it right?
_controller = List.generate(images.length, (i) => TextEditingController());
Asset asset = images[index];
return Padding(
padding: EdgeInsets.all(8.0),
child: Container(
height: 100,
width: 100,
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(15)),
child: AssetThumb(
asset: asset,
width: 300,
height: 300,
),
),
Form(
key: _formKey,
child: TextFormField(
keyboardType: TextInputType.number,
validator: (String value) {
double sal = double.tryParse(value);
if (sal == null) {
return 'enter or delete row';
}
return null;
},
controller: _controller[index],
),
),
],
),
),
);
}),
),
);
}
Here _formkey gives me error duplicate key found.Can I generate a list of formKeys according to the length of images?
at last I want to upload the list of textEditingControllers. I has .toList() parameter but not .text

Answer 1

You should have just one Form widget with one FormKey and that should wrap the all the TextFormField widgets.
Form class
An optional container for grouping together multiple form field
widgets (e.g. TextField widgets).
https://api.flutter.dev/flutter/widgets/Form-class.html
So in this case, your Form should wrap the GridView.
Here is your buildGridView method with the update:
Widget buildGridView() {
return Container(
height: 400,
child: Form(
key: _formKey,
child: GridView.count(
crossAxisCount: 1,
scrollDirection: Axis.horizontal,
children: List.generate(images.length, (index) {
//I can use the index I defined below in controller.
//says i is undefined so I used the index which defined above.
//Am I doing it right?
_controller =
List.generate(images.length, (i) => TextEditingController());
Asset asset = images[index];
return Padding(
padding: EdgeInsets.all(8.0),
child: Container(
height: 100,
width: 100,
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(15)),
child: AssetThumb(
asset: asset,
width: 300,
height: 300,
),
),
TextFormField(
keyboardType: TextInputType.number,
validator: (String value) {
double sal = double.tryParse(value);
if (sal == null) {
return 'enter or delete row';
}
return null;
},
controller: _controller[index],
),
],
),
),
);
}),
),
),
);
}
In order to get the list of text from the controller list, you need to map each controller to get the text.
List<String> textList = _controller.map((x) => x.text).toList();