```
    class CardWidget extends StatelessWidget {
  final String title;
  final Color color;
  final FaIcon icon;
  final Function()? onTap;
  const CardWidget(
      {super.key,
      required this.title,
      required this.color,
      this.onTap,
      required this.icon});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
        child: Card(
          elevation: 4,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25.0),
          ),
          color: color,
      ),
    );
  }
}

```

I created a class as above and defined FaIcon in it, but I cannot use the icon property in the card.

[![enter image description here](https://i.stack.imgur.com/qcQB0.png)](https://i.stack.imgur.com/qcQB0.png)

I want to use a text in the middle of the card as above and an icon in the middle of the card above the text.

I took the card structure I created into Column and tried to add an icon like that. But since I can't define the icon inside the Card Widget, it places the icon outside the card.