Create additional cards on button press - flutter

Question

I have a Stateful widget class with a card, the card has a dropdown and a text field. There is a Floatingactionbutton, I want to create an additional card when ever the floatingactionbutton is pressed. I guess I am supposed to create a list of this widget, but I am not too sure how to go about it.
Here is the code with the cards.
class CustomerCurrentSuppliers extends StatefulWidget {
const CustomerCurrentSuppliers({Key key}) : super(key: key);
#override
_CustomerCurrentSuppliersState createState() => _CustomerCurrentSuppliersState();
}
class _CustomerCurrentSuppliersState extends State<CustomerCurrentSuppliers> {
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
child: Icon(Icons.add),
onPressed: () {
//This is where the code to create additional cards come in ------>
},
),
body: Padding(
padding: const EdgeInsets.only(top: 38.0, right: 10, left: 10),
child: Column(
children: [
Container(
height: 170,
child: Card(
child:
Column(
children: [
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,
),
),
],
),
),
);
}
}

Answer 1

You didn't provide the full code but I understand the logic you want.
Here is the code.
import 'package:flutter/material.dart';
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(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
child: Icon(Icons.add),
onPressed: () {
setState(() { //setState is used to update the UI
counter++;
});
},
),
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: Center(
child: Text(
"This is card ${index+1}"
),
),
);
}),
),
);
}
}

Answer 2

You can create List and increment the List when fab pressed.
class CustomerCurrentSuppliers extends StatefulWidget {
#override
_CustomerCurrentSuppliersState createState() =>
_CustomerCurrentSuppliersState();
}
class _CustomerCurrentSuppliersState extends State<CustomerCurrentSuppliers> {
int cardCount = 1;
List<int> cardList = [1];
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
child: Icon(Icons.add),
onPressed: () {
cardCount += 1;
cardList.add(cardCount);
setState(() {});
},
),
body: Padding(
padding: const EdgeInsets.only(top: 38.0, right: 10, left: 10),
child: ListView.builder(
itemCount: cardList.length,
itemBuilder: (content, index) {
return Container(
height: 170,
child: Card(
child: Column(
children: [
Text('FormBuilderDropdown'),
SizedBox(
height: 20,
),
Text('Region')
],
),
elevation: 8,
),
);
})),
);
}
}
Note: You have to handle errors/add more logics when pressing the button otherwise list will increment every time user press the button.