Get values from dynamically created form fields in flutter and dart - json

Question

I have a form that allows the user to create addition cards at a tap of a button. Each card contains three form fields. How do i get the data from the forms to a json or to a list?
Hopefully get it to this format
"supplier_former_business": [
{
"name_of_company": "John Bull",
"year": 2018,
"amount": 28556
},
{
"name_of_company": "Gini Bull",
"year": 2019,
"amount": 1225
}
]
Here is the code that i have written so far but I am not sure how to get the values from the form fields in the cards.
class CustomerCurrentSuppliers extends StatefulWidget {
const CustomerCurrentSuppliers({Key key}) : super(key: key);
#override
_CustomerCurrentSuppliersState createState() => _CustomerCurrentSuppliersState();
}
class _CustomerCurrentSuppliersState extends State<CustomerCurrentSuppliers> {
int counter=1;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: kPrimaryColor,
title: const Text('Suppliers Data'),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: Icon(
Icons.arrow_forward
),
onPressed: () {
print(counter);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SupplierSchemeUnderConsideration()
),
);
//...
},
heroTag: null,
),
SizedBox(
height: 10,
),
FloatingActionButton(
child: Icon(
Icons.add
),
onPressed: () {
setState(() { //setState is used to update the UI
counter++;
});
},
heroTag: null,
)
]
),
body: Padding(
padding: const EdgeInsets.only(top: 38.0, right: 20, left: 20),
child: ListView.builder(
itemCount: counter, //updating counter will update the UI with new card
itemBuilder: (context,index){
return Card(
child:
Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: FormBuilderTextField(
name: 'Region',
decoration: InputDecoration(
labelText: "Supplier",
border: OutlineInputBorder()),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context),
]),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: DropdownButtonHideUnderline(
child: FormBuilderDropdown(
name: 'dropdown',
hint: Text("Year"),
isExpanded: true,
items: [
"2018",
"2019",
"2020",
"2021",
].map((option) {
return DropdownMenuItem(
child: Text("$option"),
value: option,
);
}).toList(),
),
),
),
SizedBox(height: 20,),
Padding(
padding: const EdgeInsets.all(8.0),
child: FormBuilderTextField(
name: 'Region',
decoration: InputDecoration(
labelText: "Amount",
border: OutlineInputBorder()),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context),
]),
),
),
],
),
elevation: 8,
);
}),
),
);
}
}