Search code examples
flutterdarticonsalignment

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


    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

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.


Solution

  • 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"),
              ],
            ),
          ),
        ),