Generate TextEditingController for dynamicly generated TextFormField in Flutter - flutter

Question

I have to generate TextFormField under a Form widget based on an array return from the API. Once these fields are generated the can enter values in it. When the user clicks on the submit button, the values of each field should be put in an array to post the API.
Object to be sent to API
{
"billerId" :"12341249",
"customerParams": [ // Each object in this array denotes input field's name and value
{
"name": "Consumer Number",
"value" : "43141"
},
{
"name": "Subdivision Code",
"value": "23"
}
]
}
Below is my StatefulWidget where I'm looping the over fields array (which came from API) to generate fields. My problem is when I'm hitting the Submit button, the print statement logs the object, similar to above, but the last field pushed twice.
// All necessary imports
class AddCustomerDetails extends StatefulWidget {
final Biller biller;
const AddCustomerDetails({Key key, this.biller}) : super(key: key);
#override
_AddCustomerDetailsState createState() => _AddCustomerDetailsState();
}
class _AddCustomerDetailsState extends State<AddCustomerDetails> {
final _formKey = GlobalKey<FormState>();
List _customerInputFields;
var _submitObj;
#override
void initState() {
_customerInputFields = widget.biller.customerParameter;
_submitObj = {'billerId': widget.biller.id, 'customerParams': []}; // Initializing it here
super.initState();
}
Widget _generateForm(List fields) {
return Form(
key: _formKey,
child: Column(
children: [
...fields.map((field) {
return TextFormField(
validator: (value) => _validateField(value),
onChanged: (value) {
_submitObj['customerParams']
.add({'name': field['paramName'], 'value': value}); // I know this is wrong and will push object on every key press
},
);
}).toList(),
SizedBox(height: 16),
RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
print(_submitObj); // See Actual response in snippet below
}
},
child: Text('Submit'),
),
],
),
);
}
String _validateField(value) {
// ... Validate field if empty
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Padding(
padding: EdgeInsets.all(
AppMediaQuery(context).appHorizontalPadding(4),
),
child: _generateForm(_customerInputFields),
),
],
),
);
}
}
Actual response
I/flutter ( 8118): {billerId: JBVNL0000JHA01, customerParams: [{name: Consumer Number, value: 4}, {name: Consumer Number, value: 43}, {name: Consumer Number, value: 431}, {name: Consumer Number, value: 4314}, {name: Consumer Number, value: 43141}, {name: Subdivision Code, value: 2}, {name: Subdivision Code, value: 23}]}
I don't want it to push the object every time I press the key.
How this can be achieved? Of course, I can add a denounce, but that won't solve the problem.

Answer 1

Could you use a Map to collect the values instead of a List?
void initState() {
_customerInputFields = widget.biller.customerParameter;
/// Initialize `customerParams` as a map here
_submitObj = {'billerId': widget.biller.id, 'customerParams': {}};
super.initState();
}
...
return TextFormField(
validator: (value) => _validateField(value),
onChanged: (value) {
/// Add/Update the field subscript and value here
_submitObj['customerParams'][field['paramName']] = value;
},
);```