How do I add an icon inside a card Widget in Flutter?-CodePudding

    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.

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.

CodePudding user response：

Card has child property, you can use it like

child: Card(
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25.0),
      ),
      color: color,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            icon,
            Text("text"),
          ],
        ),
      ),
    ),

CodePudding user response：

The Card widget has a child property. So you can use the Card widget like this:

Card(
   elevation: 4,
   shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(25.0),
   ),
   color: color,
   child: Column(
      children: [
          your_icon_here,
          your_text_here,
      ],
   ),
),