Create additional cards on button press

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,
                ),
             ),
             
           ],
         ),
       ),
    );
  }
}

score 1 · Accepted Answer · answered Mar 15 '22 at 02:55

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}"
                ),
              ),
            );

        }),
      ),
    );
  }
}

score 0 · Answer 2 · answered Mar 15 '22 at 02:45

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.

Create additional cards on button press

2 Answers2