ListView item smaller than child content

I have a simple custom ListTile component that is wrapped with the Card widget, the content of the card widget are extending past its boundary.

class CListItem extends StatelessWidget {
  final text;

  const CListItem({super.key, this.text});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(text),
        leading: Icon(Icons.calendar_today),
        subtitle: Text('23/12/2020'),
        trailing: Icon(Icons.arrow_forward_ios),
        onTap: () {},
      ),
    );
  }
}

The custom component is rendered inside a basic ListView,

class _SummaryScreenState extends State<SummaryScreen> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            child: const HeadingWidget(text: 'Upcoming Activities'),
          ),
          ListView.builder(
            itemCount: 4,
            shrinkWrap: true,
            prototypeItem: const ListTile(
              title: Text('Prototype'),
            ),
            itemBuilder: (context, index) {
              return CListItem(
                text: 'Upcoming Activity $index',
              );
            },
          ),
        ],
      ),
    );
  }
}

I’m new to flutter and i cant figure out why it looks like the image below, I am expecting for the ListTile content to be all inside the card widget.

I tried changing the heoght of the ListView, wrapping the ListTile with a container then a card but nothing seems to work.

>Solution :

You have set the prototypeItem property which forces a certain size.

If non-null, the prototypeItem forces the children to have the same
extent as the given widget in the scroll direction.

Remove the prototype ListTile and see what happens.