卡片小部件可以显示ListTile吗？

Question

In this app, when the user clicks the FAB, it returns a Card wrapped in a GestureDetector . when the user clicks on a displayed card, the GestureDetector will navigate them to another page. I want to implement a delete function so that i can dismiss a Card .

So i defined the child: of the Card as a ListTile with a trailing Icon which is supposed to delete that particular Card . But when i add a Card , it only displays the title: and does not display the trailing Icon .

The Cards are displayed in a SliverGrid with a crossAxisCount = 2 .

question: do Card widgets support displaying a ListTile with a trailing widget or is my implementation wrong?

PS i have tried setting crossAxisCount = 1 but it still does not show the trailing Icon .

card generating function:

  void addItems() async {
          setState(() {
            cardList.insert(0, new GestureDetector(
              onTap: () async {
                await Navigator.push(context, MaterialPageRoute(
                  builder: (context) =>
                      TodoList(), // this just navigates to another screen ; not important in this question
                )
                );
              },
              child: Card(
                  child: ListTile(
                      title: Text("project 1"),
                      trailing: new Icon(Icons.remove_circle,
                        color: Colors.redAccent,),
//                      subtitle: whitefontstylemont(text: "project 1", size: 20,)) //this is just a custom TextStyle
              ),
            )
            ));
          });
        }

card deleting function:

      _deleteNoDo(int index) async {
        debugPrint("Deleted Item!");
        setState(() {
          cardList.removeAt(index);
        });
      }

complete example (excluding above mentioned functions):

class _Starting_screenState extends State<Starting_screen> {
  int _count = 0;



  @override
  Widget build(BuildContext context) {
      List<Widget> cardList = new List.generate(
          _count, (int i) => new createCard());
      SystemChrome.setEnabledSystemUIOverlays([]);

//      _deleteNoDo(int index) async {
//        debugPrint("Deleted Item!");
//        setState(() {
//          cardList.removeAt(index);
//        });
//      }
//
//      void addItems() async {
//        setState(() {
//          cardList.insert(0, new GestureDetector(
//              onTap: () async {
//                await Navigator.push(context, MaterialPageRoute(
//                  builder: (context) =>
//                      TodoList(), // this just navigates to another screen ; not important in this question
//                )
//                );
//              },
//              child: Card(
//                  child: ListTile(
//                      title: Text("project 1"),
//                      trailing: new Icon(Icons.remove_circle,
//                        color: Colors.redAccent,),
////                      subtitle: whitefontstylemont(text: "project 1", size: 20,)) //this is just a custom TextStyle
//              ),
//            )
//            ));
//          });
//        }

        return Scaffold(
            floatingActionButton: FloatingActionButton(
              onPressed: () async {
                setState(() {
                  _count += 1;
                });
              },
              heroTag: "btn2",
              child: Icon(Icons.add, color: Color(whitecolor),), // this is just a custom color
              backgroundColor: Color(redcolor),), // this is just a custom color
            body: CustomScrollView(
                slivers: <Widget>[
                  SliverAppBar(
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                    ),
                    actions: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(top: 20, right: 10),
                          child: whitefontstyle(text: "Remaining tasks for today - ${cardList.length}", size: 20,), // this is just a custom textstyle
                        ),
                      ),
                    ],
                  ),
                  SliverGrid(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2
                      ),
                      delegate: new SliverChildBuilderDelegate((context,
                          index) {
                        return cardList[index]; // this is where the cards are displayed in a list
                      },
                          childCount: cardList.length
                      )
                  ),
                ]
            )
        );
      }
    }

actual result:

expected result (assume only displaying title and trailing icon as shown below):

Answer 1

Are you sure that you are calling the right methods. Cause there are few things which are not in place or you haven't shared the right code. I will address them below.

1. First of all the alignment of child text in card. It is in center of the card but there is no center property used in your code. Card widget does not auto align the text.
2. Second adding the items. You post the code of addItems function but also added another function in build with name createCard . So we don't know if that createCard have the same widget tree as the addItems function or not.
3. Its not working not so you are not seeing it but even if you are able to see the Icon widget you still won't be able to delete the item. The reason being is its a non-clickable widget. You should be using the IconButton widget if you want to add the click functionality on it.

These are my finding in your code. If you can review them or either share the correct code, may be I am able to help more.