How to create a card in a listview with button press on Flutter?

Question

Listview will be empty after the click I would like to create a card in the ListView on flutter.

Is it also possible to create a dynamic home page? For example when there will be no any card on the list it is going to write on the background there is no any card yet. But if card created this indication will be deleted.

Could you please support me regarding this topic?

Show us what you have tried, this is quite a basic thing (a simple condition on your card list like `cardList != null && cardList.length > 0 ? ListView(...) : Text("No card")`) — Yann39, May 01 '20 at 14:14
I have 3 documents in my firestore each inquiry has photo and 2 text sections. When user request a document I would like yo show in a card Listview. If user request second time to retrieve data the list will be updated as 2 requested cards. How can I achieve it? — , May 04 '20 at 19:15

score 0 · Answer 1 · answered May 01 '20 at 13:58

0

You should check the official documentation. It's not so hard to learn with it :

answered May 01 '20 at 13:58

F Perroch

1,988
2
11
23

Ok but how about the dynamic homepage? – May 01 '20 at 14:08
1

You can check if your list is null or empty and return a `Text` widget if it is like @Yann39 comments in your question – F Perroch May 01 '20 at 14:24

score 0 · Accepted Answer · edited Jun 29 '20 at 19:44

import 'package:flutter/material.dart';
    
    class ListScreen extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _ListScreenState();
    }
    
    class _ListScreenState extends State<ListScreen> {
      bool _isLoading = true;
      List<String> _items = [];
    
      @override
      void initState() {
        super.initState();
        _getListData();
      }
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            body: Container(
              margin: EdgeInsets.all(10),
              child: !_isLoading && _items.isEmpty
                  ? Center(
                      child: Text("No data found"),
                    )
                  : (_isLoading && _items.isEmpty)
                      ? Container(
                          color: Colors.transparent,
                          child: Center(
                            child: CircularProgressIndicator(
                              valueColor:
                                  AlwaysStoppedAnimation<Color>(Colors.pink),
                            ),
                          ),
                        )
                      : ListView.builder(
                          itemCount: _items.length,
                          itemBuilder: (context, index) {
                            return _createListRow(_items[index], index);
                          },
                        ),
            ),
          ),
        );
      }
    
      _createListRow(String item, int index) {
        return Card(
          elevation: 3,
          clipBehavior: Clip.hardEdge,
          margin: EdgeInsets.all(10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(item),
              FlatButton(
                child: Text("Delete"),
                onPressed: () {
                  setState(() {
                    _items.removeAt(index);
                  });
                },
              )
            ],
          ),
        );
      }
    
      _getListData() {
        //  Create dynamic list
        Future.delayed(Duration(milliseconds: 500));
        setState(() {
          _items.add("First");
          _items.add("Second");
          _items.add("Third");
          _isLoading = false;
        });
      }
    }

How to create a card in a listview with button press on Flutter?

2 Answers2