Making reusable flutter widget - flutter

Question

I've been trying to make my custom widget reusable but kept on hitting dead ends... I want to be able to use change the colors of the icons, text within the card, the first card, and the enclosed card... Also, I should be able to change the icons, text that is within the icon and also the on tap function for each of the buttons should be able to do something different whenever it's tapped
class _CustomCardState extends State<CustomCard> {
#override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.fromLTRB(20, 10, 20, 1),
color: Colors.red,
child: InkWell(
onTap: (){},
child: ListTile(
leading: Card(
color: Colors.white,
margin: EdgeInsets.all(5),
child: Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
KycIcons.add_a_photo,
size: 20,
color: Colors.red,
),
),
),
title: Text('Uplaod your selfie',
style: TextStyle(color: Colors.white, fontSize: 16)),
),
),
);
}
}`

Answer 1

Here is a very simple example of how you can build reusable widgets:
import 'package:flutter/material.dart';
class ContainerMain extends StatelessWidget {
String text;
Color color;
ContainerMain(this.text, {this.color = Colors.white});
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
alignment: Alignment.center,
height: size.height / 10,
width: size.width,
child: Text(
text,
style: TextStyle(fontSize: 20, color: color),
),
);
}
}

Answer 2

Here is my contribution to your class. BTW, it should be a StatelessWidget instead of a StatefulWidget since there are no state variables involved.
import 'package:flutter/material.dart';
class CustomCard extends StatefulWidget {
final Color iconColor;
final double iconSize;
final Color cardColor;
final Color innerCardColor;
final String title;
final TextStyle style;
final void Function()? onTap;
const CustomCard({
Key? key,
this.iconColor = Colors.red,
this.iconSize = 20.0,
this.cardColor = Colors.red,
this.innerCardColor = Colors.white,
this.title = 'Upload your selfie',
this.style = const TextStyle(color: Colors.white, fontSize: 16),
this.onTap,
}) : super(key: key);
#override
_CustomCardState createState() => _CustomCardState();
}
class _CustomCardState extends State<CustomCard> {
#override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.fromLTRB(20, 10, 20, 1),
color: widget.cardColor,
child: InkWell(
child: ListTile(
leading: Card(
color: widget.innerCardColor,
margin: const EdgeInsets.all(5),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
KycIcons.add_a_photo,
size: iconSize,
color: widget.iconColor,
),
),
),
title: Text(widget.title, style: widget.style),
onTap: widget.onTap,
),
),
);
}
}