Making reusable flutter widget-CodePudding

I am new to flutter and 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 its 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)), ), ), ); } }

CodePudding user response：

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),
      ),
    );
  }
}

CodePudding user response：

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,
        ),
      ),
    );
  }
}