I want to generate card by onPressed method in my flutter app . Can anyone show me a roadmap for that...?

Question

I have made the listview.builder in my page. In that i have designed my card . Now i want to generate card in the Listveiw.buider one by one by clicking a onpressed method in a floating action button. Which method/function should i write in that onpressed ? and how to generate card in that and what should i change in itemCount and itemBuilder. I need that roadmap. Thanks.

ListView.builder(
      itemCount: 5,
    itemBuilder: (context, index) {
      return Dismissible(
        key:Key(null),
        direction: DismissDirection.startToEnd,
        onDismissed: (direction) {},
        confirmDismiss: (direction) {
          return showDialog(
              context: context, builder: (_) => DeleteCard());
        },
        background: Container(
          color: Colors.red,
          padding: EdgeInsets.only(left: 16),
          child: Icon(
            Icons.delete,
            color: Colors.white,
          ),
          alignment: Alignment.centerLeft,
        ),
        child: Card(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0)),
          color: Colors.white70,
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: 120,
                    padding: EdgeInsets.all(10.0),
                    child: Text(
                      "Project ",
                      style: TextStyle(
                          fontSize: 11, fontWeight: FontWeight.bold),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(10.0),
                    child: ProjectName(),
                  ),
                ],
              ),

              // item add start

              Container(
                padding: EdgeInsets.all(10.0),
                child: TextFormField(
                  decoration: InputDecoration(
                    hintText: "Item name" ,hintStyle: TextStyle(fontSize: 12),
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(10.0),
                child: TextFormField(
                  decoration: InputDecoration(
                    hintText: "Amount",hintStyle: TextStyle(fontSize: 12),

                  ),
                  keyboardType: TextInputType.number,
                ),
              ),
            ],
          ),
        ),
      );
    }
  ),

Try using a variable let's say `totalCards` then put it at `itemCount: totalCards` and increment it in `FAB` this will increase the `index` of the `ListView.builder` and since you are returning some `Widgets` so the number of widgets will also increase. Give it a shot :) — Hamza, Oct 25 '20 at 11:29
thanks for your response brother . But after implement this with variables it is now showing infinitive cards in my listview.builder. I think i should write some mehod in the onpressed . Can u provide a solution of it. I just only want ceate one card by clicking the button. — Mir Fahim Rahman, Oct 25 '20 at 11:46
I have add the working code, which will increase the `ListTile` in a `ListView.builder` when `onPressed` Try it. I hope this will help :) — Hamza, Oct 25 '20 at 12:05

score 1 · Accepted Answer · answered Oct 25 '20 at 12:05

1

This is something you are looking for I think. Just replace the ListTile with your own Card

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  var listLength = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App :)"),
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              listLength++;
            });
          }),
      body: Container(
          child: ListView.builder(
              itemCount: listLength,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Text("$index"),
                  title: Text("List Tile as Widget"),
                );
              })),
    );
  }
}

answered Oct 25 '20 at 12:05

Hamza

1,523
15
33

and how to add id number for each card. like card 1 , card 2 , card3 ..... when i generate card it will generate with id serial. – Mir Fahim Rahman Oct 25 '20 at 12:12
1

The similar way as I'm showing the `index` of every `ListTile` here, you can use the `cardID` here if you have any specific. Or you can simple use the `index` in similar way – Hamza Oct 25 '20 at 12:17
thanks again bro . but It is counting from 0 . anyway to count it from 1...? – Mir Fahim Rahman Oct 25 '20 at 12:21
In my code you can do this `leading: Text("${index + 1}"),` and use the same trick for your code :) – Hamza Oct 25 '20 at 12:28
wow i have learnt something from u today . thanks. :) – Mir Fahim Rahman Oct 25 '20 at 12:33

score 0 · Answer 2 · edited Nov 04 '20 at 09:59

0

I have solved it by using a var which initial value in 0 then make a function in set state and increment the variable. Then I called the function in my floating action button and in listview.builder item count I set the var name. I hope it will help others it's a easy solution to generate card by using onpressed.

edited Nov 04 '20 at 09:59

marc_s

732,580
175
1,330
1,459

answered Oct 25 '20 at 12:05

Mir Fahim Rahman

35
4

I want to generate card by onPressed method in my flutter app . Can anyone show me a roadmap for that...?

2 Answers2